自定义组件/插件/Plugin 原理概览
通过自定义属性编辑器来配置组件的某些属性的复杂编辑需求
举个例子:图片的 imgSrc 属性,采用自定义编辑器的方法如下,图片演示
props: {imgSrc: {type: String,defualt: '',editor: {custom: true// 如果写了 custom: true,则会采用 editor.vue 或者 editor.js 来配置组件的相关属性// 自定义组件的加载目前在 mini-editor/panel/props.js 的 loadCustomEditorForPlugin 方法中加载并注册// 这样,就可以通过自定义属性编辑器来配置组件的某些复杂属性了// 图片演示:https://user-images.githubusercontent.com/12668546/69001396-6a916500-0918-11ea-8f39-5e27a688d2fe.png}}}
- 从上面来看,其实我们自定义的这个图片选择器,只影响到了 imgSrc 这一个属性
- 其实可以把它抽象出来作为一个组件(比如叫做
luban-support-image-gallery(鲁班辅助支撑组件-图片库))
- 其实可以把它抽象出来作为一个组件(比如叫做
- 发布到 npm 上,作为全局组件引入即可
简单改造下 imgSrc 的属性配置:
props: {imgSrc: {type: String,defualt: '',editor: {type: 'luban-support-image-gallery'}}}
