可视化插件开发
立即上手 开发第一个插件
以文本组件为例,我们为官方插件开发一个可以拖拽到画布上的文本组件,可以通过右侧属性面板调整文字的大小、颜色以及背景框。 通过数据面板设置文本显示的值。
如下图所示:
视频教程如下:
文档教程如下:
第一步:下载visual-editor项目
https://github.com/ThingsPanel/visual-editor
用代码编辑器打开
第二步:创建组件所需的文件
官方插件所在的目录是src/plugins/tp-plugin文件夹。
我们要开发自己的插件的话,可以在plugins目录再新建一个文件夹,本例中我们新建一个名为test-plugin的文件夹作为插件目录。
一个插件可以包含多个组件,我们在test-plugin目录里创建text
目录作为文本组件的目录,然后在text目录里创建以下几个文件:
index.ts、Main.vue、Data.vue、Attribute.vue 、default.ts、icon.svg
第三步:编写Main.vue
// text/Main.vue
<template>
<div :style="myStyle" style="width:100%;height:100%">
{{ value }}
</div>
</template>
<script>
export default {
components: {},
props: {
value: {
type: [String],
default: "文本"
}
},
data() {
return {}
},
computed: {
myStyle() {
if (this.style) {
return this.style
} else {
return {
fontSize: '20px',
fontColor: '#ffffff',
backgroundColor: '#409EFF',
border: '1px solid #000'
}
}
}
},
methods: {}
}
</script>
<style lang="scss" scoped></style>
第四步:编写属性面板Attribute.vue
// text/Attribute.vue
<template>
<el-collapse v-model="activeNames">
<el-collapse-item title="样式" name="style">
<el-form v-model="formData">
<el-form-item label="字体大小">
<el-input v-model="formData.fontSize"></el-input>
</el-form-item>
<el-form-item label="字体颜色">
<el-color-picker v-model="formData.color" />
</el-form-item>
<el-form-item label="背景颜色">
<el-color-picker v-model="formData.backgroundColor" />
</el-form-item>
</el-form>
</el-collapse-item>
</el-collapse>
</template>
<script>
export default ({
data() {
return {
activeNames: 'style',
formData: {
fontSize: 20,
color: '#ffffff',
backgroundColor: '#409EFF'
}
}
},
watch: {
formData: {
handler(val) {
// 当自定义属性改变时,传递给Main.vue的style属性
this.$emit("onChange", {
style: { ...val, fontSize: val.fontSize + 'px' }
});
},
deep: true
}
}
})
</script>
<style lang="scss" scoped></style>
当用户改变了右侧属性面板的值后,需要在画布上的节点反映出来。
如:修改了属性面板的文字大小或颜色之后,画布上的节点对应的样式也要做出改变。
使用vue的emit方法,传递onChange事件。
this.$emit("onChange", {
style: {
fontSize: 20,
// ...
}
});
之后,编辑器会自动将style传递到Main.vue中,Main组件的props属性就会接收到传过来的参数.
目前仅支持传递style和data.