quantum-dragons/image-map-field

维护者

详细信息

github.com/quantum-dragons/silverstripe-image-map-field

源代码

问题

安装: 534

依赖: 0

建议者: 0

安全: 0

星标: 0

关注者: 2

分支: 0

开放问题: 0

语言:Vue

0.1 2018-09-30 23:31 UTC

Requires

BSD-3-Clause dd30f45e73fe4f9d57e797bc25e39709b83b2c62

This package is auto-updated.

Last update: 2024-09-29 05:28:00 UTC

README

简介

此组件用于在图像上绘制图像映射区域/区域/热点覆盖。这是为了复制HTML图像映射 <map> 和 <area>，因此我们使用相同的术语来表示此模块。

入门

在项目的根目录中运行以下命令，将构建工件 (*.js 和 *.scss) 添加到项目的公共文件夹中。

    $> composer vendor-expose

将图像映射字段添加到页面，并将其与图像字段相关联。

    <?php
    use ImageMapField\Forms\ImageMapField;
    use ImageMapField\Traits\ProcessMapData;
    
    class TestPage {

        use ProcessMapData;

        private static $db = [
            'ProcessMapData' => 'Text',
        ];

        private static $has_one = [
            'ProcessMapImage' => Image::class,
        ];

        public function getCMSFields()
        {
            $fields = parent::getCMSFields();
            $fields->addFieldToTab(
                'Root.Main',
                ImageMapField::create('ProcessMapData', 'ProcessMapData')
                    ->setImage($this->ProcessMapImage()),
            );
        }

        ...
    }
    ...

    $ImageMapView

    ...

依赖项

- Npm / yarn
- Vue.js

前端工具

在 dev 模式下构建，请在模块根目录中运行以下命令

$> npm run dev

在 prod 模式下构建，请在模块根目录中运行以下命令

$> npm run prod

有关更多详细信息，请参阅 package.json 文件。