...
form:标签的格式是:“vue文件名:控件归属类别”,其中归属类别有:
信息 |
---|
布局:form/layout |
注:如果需要引用第三方依赖,可以写在assemble-to.yaml中指定,填写要求为【依赖名:^依赖版本】,这个写法和npm-package中的依赖声明方法是一致的,如:
...
此外,控件的id通过name属性返回,需要返回一个的函数是必须实现的,在methods内部需要实现:
...
- getFormName:如果控件需要绑定DWF数据模型中的数据属性则通过此函数返回名称。
- setArgs,getArgs:用于设置控件展示的参数,表单建模工具在读入表单配置对应的JSON或者在保存的时候会调用这两个函数。getAllow:是否允许控件内部拖入其他控件,这个函数的返回值决定了控件是否是一个容器。
- getEditBox:当需要显示配置区的设置项的时候会调用此函数,此时是将配置区显示出来的时候。
最后,表单控件的函数和vue整个生命周期函数调用的顺序是: created -> setDisplayType -> setArgs -> mounted,如果需要提前加载某些数据可以在create()里增加,在本章的例子中无需实现create和mounted。
...
代码块 |
---|
export default { // Vue数据绑定的时候要求返回的结果 data() { return { // 插件的名字 name: "helloControl", // 表示是否已经进入画布区 t_preview: falsetrue, // 是否显示控件的属性编辑区 t_edit: false, // 属性配置项,按需设置 args: {}, }; }, methods: { //* 在建模的时候传入,提示控件是在画布区还是在控件列表中默认不用变化,返回编辑框供建模工具绘制,当控件拖入画布区以后被点击的时候触发 0:表示在画布区,已经被拖入 1:表示在控件区,准备被拖入 2: 表示在拖动中,还未放下 */ setDisplayType(typegetEditBox() { if (type == 0) this.t_previewedit = true; return this.$refs.edit; }, // 默认不用变化,返回编辑框供建模工具绘制,当控件拖入画布区以后被点击的时候触发 现有表单加载在画布区加载控件的时候,会将之前的配置传入 setArgs(args) { getEditBox(for (var i in args) { this.t_editargs[i] = true;args[i]; } return this.$refs.edit; }, // 当插件无法直接通过style设置高度时,使用setHeight方法设置高度表单保存的时候将控件的设置合并到表单自身的JSON中 setHeightgetArgs() { ifreturn (!this.$refs.main) returnargs; }, // 现有表单加载在画布区加载控件的时候,会将之前的配置传入返回控件绑定的目标属性,如果没有绑定返回undefined或者null setArgsgetFormName(args) { for (var i in args) { this.args[i] = args[i]; return this.args.name; }, return this; }, // 表单保存的时候将控件的设置合并到表单自身的JSON中 getArgs() { return this.args; }, // 是否允许其他子控件拖入,如果不允许则返回null getAllow() { return null; }, // 返回控件绑定的目标属性,如果没有绑定返回undefined或者null getFormName() { return null; }, }, }; |
控件的<style>标签
如果需要一些特殊的样式可以如下设置,本章的入门控件由于无需设置所以直接置空即可:
代码块 |
---|
<style>
</style> |
最终合并结果
上述代码合并到helloControl.vue文件中的的结果如下:
代码块 |
---|
<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}, }; |
控件的<style>标签
如果需要一些特殊的样式可以如下设置,本章的入门控件由于无需设置所以直接置空即可:
代码块 |
---|
<style>
</style> |
最终合并结果
上述代码合并到helloControl.vue文件中的的结果如下:
代码块 |
---|
<template> <!-- 建模时的预览前端,即插件的实际显示样式 :addinName="name"和ref="main"一般情况不可去除 --> <section v-if="t_preview" :addinName="name"> <span style="text-align: center;"> <div class="form-addin-icon ref="main"> <!-- 控件拖放区图标的样式在画布区的显示内容 --> <span <i class="iconfont"></i> </div> <!-- 在控件拖放区图标的名字 --> <div class="form-addin-name">入门控件</div> <style=" font-size: 50px; display: flex; justify-content: center; align-items: center;" >Hello World!</span> <span v-show="t_edit" ref="edit"></span> </section> </template> <script> export default { // Vue数据绑定的时候要求返回的结果 data() { return { // 插件的名字 name: "helloControl", // 表示是否已经进入画布区 t_preview: false, // 是否显示控件的属性编辑区 t_edit: false, // 属性配置项,按需设置 args: {}, }; }, methods: { /* 在建模的时候传入,提示控件是在画布区还是在控件列表中 0:表示在画布区,已经被拖入 1:表示在控件区,准备被拖入 2: 表示在拖动中,还未放下 */ setDisplayType(type) { if (type == 0) this.t_preview = true; return this; }, // 默认不用变化,返回编辑框供建模工具绘制,当控件拖入画布区以后被点击的时候触发 getEditBox() { this.t_edit = true; return this.$refs.edit; }, // 当插件无法直接通过style设置高度时,使用setHeight方法设置高度 setHeight() { if (!this.$refs.main) return <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: true, // 是否显示控件的属性编辑区 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; }, // 是否允许其他子控件拖入,如果不允许则返回null getAllow() { return null; }, // 返回控件绑定的目标属性,如果没有绑定返回undefined或者null getFormName() { return nullthis.args.name; }, }, }; </script> <style> </style> |
...
- template标签中,需要提供画布预览、编辑区和图标状态的标签。
- script标签中
- data()返回需要给出一些基本属性:name,args,此外为了和标签配合,需要设置一些控制变量,例如t_preview,t_edit。
- 需要提供如下的一些函数实现:setDisplayType,getFormName,setArgs,getArgs,getAllow,getEditBox。
在应用端,需要注意的实现要点如下:
...