...
此外,控件的id通过name属性返回,需要返回一个的函数是必须实现的,在methods内部需要实现:
setDisplayType:在表单控件拖入画布的时候会通知控件目前希望其展示的状态。- getFormName:如果控件需要绑定DWF数据模型中的数据属性则通过此函数返回名称。
- setArgs,getArgs:用于设置控件展示的参数,表单建模工具在读入表单配置对应的JSON或者在保存的时候会调用这两个函数。
- getAllow:是否允许控件内部拖入其他控件,这个函数的返回值决定了控件是否是一个容器。
- getEditBox:当需要显示配置区的设置项的时候会调用此函数,此时是将配置区显示出来的时候。
...
代码块 |
---|
export default { // Vue数据绑定的时候要求返回的结果 data() { return { // 插件的名字 name: "helloControl", // 表示是否已经进入画布区 t_preview: falsetrue, // 是否显示控件的属性编辑区 t_edit: false, // 属性配置项,按需设置 args: {}, }; }, methods: { // 默认不用变化,返回编辑框供建模工具绘制,当控件拖入画布区以后被点击的时候触发 getEditBox() { this.t_edit = true; return this.$refs.edit; }, // 现有表单加载在画布区加载控件的时候,会将之前的配置传入 setArgs(args) { for (var i in args) { this.args[i] = args[i]; } return this; }, // 表单保存的时候将控件的设置合并到表单自身的JSON中 getArgs() { return this.args; }, // 返回控件绑定的目标属性,如果没有绑定返回undefined或者null getFormName() { return this.args.name; }, }, }; |
...
代码块 |
---|
<template> <!-- 建模时的预览前端,即插件的实际显示样式 :addinName="name"和ref="main"一般情况不可去除 --> <section v-if="t_preview" :addinName="name" ref="main"> <!-- 在画布区的显示内容 --> <span style=" font-size: 50px; display: flex; justify-content: center; align-items: center;" >Hello World!</span> <span v-show="t_edit" ref="edit"></span> </section> <section v-else :addinName="name"> <span style="text-align: center;"> <div class="form-addin-icon"> <!-- 控件拖放区图标的样式 --> <i class="iconfont"></i> </div> <!-- 在控件拖放区图标的名字 --> <div class="form-addin-name">入门控件</div> </span> </section> </template> <script> export default { // Vue数据绑定的时候要求返回的结果 data() { return { // 插件的名字 name: "helloControl", // 表示是否已经进入画布区 t_preview: falsetrue, // 是否显示控件的属性编辑区 t_edit: false, // 属性配置项,按需设置 args: {}, }; }, methods: { // 默认不用变化,返回编辑框供建模工具绘制,当控件拖入画布区以后被点击的时候触发 getEditBox() { this.t_edit = true; return this.$refs.edit; }, // 现有表单加载在画布区加载控件的时候,会将之前的配置传入 setArgs(args) { for (var i in args) { this.args[i] = args[i]; } return this; }, // 表单保存的时候将控件的设置合并到表单自身的JSON中 getArgs() { return this.args; }, // 返回控件绑定的目标属性,如果没有绑定返回undefined或者null getFormName() { return this.args.name; }, }, }; </script> <style> </style> |
...
- template标签中,需要提供画布预览、编辑区和图标状态的标签。
- script标签中
- data()返回需要给出一些基本属性:name,args,此外为了和标签配合,需要设置一些控制变量,例如t_preview,t_edit。
- 需要提供如下的一些函数实现:setDisplayType,getFormName,setArgs,getArgs,getAllow,getEditBox。
在应用端,需要注意的实现要点如下:
...