plugins

编辑器插件

图层都是以插件的模式载入,需要根据特定的格式传入插件,即可载入插件,插件参数如下。

{
    type: 'img', // 插件类型,必须确保唯一,且按照变量的命名规范
    icon: Component, // <i className="h5ds ico-xxx" /> 可以采用iconfont的图标
    name: '图片', // 中文名字
    editor: Component, // 编辑区域的组件
    layerdom: Component, // layer dom 纯react组件
    selectIcon: () => new Promise(), // promise or function 如果是promise 对象,会自动添加layer数据,如果是function,不会自动添加layer数据
    origindata: json, // 原始数据
    willMount: () => {}, // 挂载之前执行
    didMount: () => {}, // 挂载之后执行
    willUnmount: () => {}, // 挂载之后执行
    modal: Component, // 弹窗
    editorSet: { // 编辑器设置区域设置
        y: false,
        x: false,
        width: false,
        height: false,
        rotate: false,
        borderRadius: false,
        hide: false,
        opacity: false,
        shadow: false,
        border: false,
        animate: false, // 是否有动画
        interaction: false // 交互
    },
    scripts: [] // 异步加载第三方插件库
}

插件参数详解如下:

type (string | '')

插件类型,必须确保是唯一,按照变量名的规范命名

name (string | '')

插件的名称

icon (Component | null)

插件显示的小图标

selectIcon (Promise | undefined)

点击插件icon触发的回调函数, 如果是promise 对象,会自动添加layer数据,如果是function,不会自动添加layer数据

selectIcon (Promise | function | undefined)

点击插件icon触发的回调函数

editor (Component | null)

插件的编辑区域,编辑区域分3部分。

  1. 第一部分:基础设置(设置x,y,width,height,id,class)
  2. 第二部分: 自定义设置(自定义的,也就是当前的react组件,具体开发见【插件开发】)
  3. 第三分部:高级设置(背景色,转角,透明度,隐藏,阴影,边框)

图标识了这3个区域,红色为自定义设置区域

layerdom (Function | null)

图层对应的HTML代码,纯react组件,最终会转化成HTML代码生成H5

/**
* @desc 图层对应的HTML代码,纯react组件
* @param layer{object} layer的数据,和origindata是对应的
* @param zIndex{number} 当前的z-index层级,默认是9999-n
* @param layerfun{object} layer的相关操作数据和函数方法的集合
* @param opt{object} 标识当前layer是在那个地方渲染的默认有参数 { isMinPage, isPhoneView },isMinPage表示在左侧列表页面渲染当前的组件,isPhoneView 表示在中间视图区域渲染组件。可以根据不同的区域做不同的处理。
* @return Component
*/
(layer, zIndex, layerfun, opt) => {
    return <div className="test-inner" >{layer.data}</div>;
}

origindata (object | {...})

图层对应的json数据,默认数据格式如下

class Origindata {
    constructor()
        this.id= null; // 图层的id,如是'auto' 会自动生成一个随机id
        this.eid= null; // 图层中element的id,如果是'auto',自动生成一个随机的id
        this.type= 'test'; // 插件类型,必须确保是唯一,按照变量名的规范命名 和 plugins.type 一致
        this.animate= []; // css动画参数,默认没有动画
        this.data= 'TEST'; // 默认的其他数据
        this.estyle= {}; // .element的样式
        this.style= { // .layer的样式,宽高定位在这里,其他样式在estyle里面
            width: 200,
            height: 100,
            top: 0,
            left: 0
        };
        this.color= ''; // 预留
        this.ue= {}; // 交互的配置,默认是{}
    }
}

willMount (Layer.componentWillMount | null)

这里是layer的生命周期函数。可以直接用this获取到当前layer的componentWillMount

didMount (Layer.componentDidMount | null)

这里是layer的生命周期函数。可以直接用this获取到当前layer的componentDidMount

willUnmount (Layer.componentWillUnmount | null)

这里是layer的生命周期函数。可以直接用this获取到当前layer的componentWillUnmount

如果在editor外需要弹窗,就可以在这里写入弹窗的相关代码,这个modal会在H5DS初始化的时候载入到页面中去。一般不会用到,为了实现更好的业务拓展加进去的。

editorSet (Object | undefined)

编辑器的一些公共设置参数。

{  // 编辑器设置区域设置
    y: false, // y 位置是否可设置
    x: false, // x 位置是否可设置
    width: false, // 宽度是否可设置
    height: false, // 高度是否可设置
    rotate: false, // 是否可旋转
    borderRadius: false, // 是否有边框圆角
    hide: false, // 是否可隐藏
    opacity: false, // 是否可设置透明度
    shadow: false, // 是否可以设置阴影
    border: false, // 是否可设置边框
    animate: false, // 是否有动画
    interaction: false // 是否可以添加交互效果
}

scripts (Array | undefined)

第三方插件库的动态载入

// eg: 动态载入腾讯地图
{
  ...,
  scripts: ['http://map.qq.com/api/js?v=2.exp&key=ZF5BZ-WGGCQ-4NK5V-GSBW3-Y6KHE-KLFJ6']
}

results matching ""

    No results matching ""