...
因此,在表单控件的vue文件中的template部分一般包含3部分,对应到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 > Hello World!</span> <!-- 在选项区的内容 --> <span v-show="t_edit" ref="edit"><> </span> </section> <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> </ </section> </template> |
首先,在第一个section标签中:
...
- name:控件的统一前缀,对应表单内部的id属性,表单建模工具也会以此名称在画布内初始化一个流水号作为控件的代号,这个代号将对应第三部分脚本中this.getAddinById的id。
- args:如果控件包含其他配置项用于描述其数据绑定,布局和显示样式则可以在这个对象里设置,在进阶部分里会重点介绍如何设置args。args:如果控件包含其他配置项用于描述其数据绑定,布局和显示样式则可以在这个对象里设置,args里必须包含一个title属性以便在表单控件树中显示,在进阶部分里会重点介绍如何设置args。
- 在上一节决定显示内容的t_preview和t_edit就在此函数内返回
...
代码块 |
---|
export default { // Vue数据绑定的时候要求返回的结果 data() { return { // 插件的名字 name: "helloControl", // 表示是否已经进入画布区 t_preview: true, // 是否显示控件的属性编辑区 t_edit: false, // 属性配置项,按需设置 args: {}, }; }, methods: { // 用于显示在表单控件树对应的标签,必须设置 title: "入门控件" }, }; }, 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>"></span> </section> <section v-else :addinName="name"> </section> </template> <script> export default { // Vue数据绑定的时候要求返回的结果 data() { return { // 插件的名字 name: "helloControl", // 表示是否已经进入画布区 t_preview: true, // 是否显示控件的属性编辑区 t_edit: false, edit: false, // 属性配置项,按需设置 args: { // 属性配置项,按需设置用于显示在表单控件树对应的标签,必须设置 argstitle: { "入门控件" }, }; }, 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> |
...
代码块 |
---|
export default {
// Vue数据绑定的时候要求返回的结果
data() {
return {
// 插件的名字
name: "helloControl",
// 属性配置项,按需设置
args: {
// 用于显示在表单控件树对应的标签,必须设置
title: "入门控件"
},
};
},
methods: {
/*
type取值范围为 create, visit, edit
需要根据三个状态修改具体前端和逻辑
一般情况下:
create创建态: 无数据,可编辑
visit浏览态: 有数据,不可编辑
edit编辑态: 有数据,可编辑
*/
setDisplayType(type) {
return this;
},
//表单引擎加载到控件的时候调用此函数设置参数取值
setArgs(args) {
for (var i in args) {
this.args[i] = args[i];
}
return this;
},
// //表单引擎提取参数取值的方法
getArgs() {
return this.args;
},
},
}; |
...
代码块 |
---|
<template> <!-- 建模时的预览前端,即插件的实际显示样式 :addinName="name"和ref="main"一般情况不可去除 --> <section :addinName="name" ref="main"> <!-- 在画布区的显示内容 --> <span style=" font-size: 50px; display: flex; justify-content: center; align-items: center;" >Hello World!</span> </section> </template> <script> export default { // Vue数据绑定的时候要求返回的结果 data() { return { // 插件的名字 name: "helloControl", ", // 属性配置项,按需设置 args: { // 属性配置项,按需设置用于显示在表单控件树对应的标签,必须设置 argstitle: { "入门控件" }, }; }, methods: { /* type取值范围为 create, visit, edit 需要根据三个状态修改具体前端和逻辑 一般情况下: create创建态: 无数据,可编辑 visit浏览态: 有数据,不可编辑 edit编辑态: 有数据,可编辑 */ setDisplayType(type) { return this; }, //表单引擎加载到控件的时候调用此函数设置参数取值 setArgs(args) { for (var i in args) { this.args[i] = args[i]; } return this; }, // //表单引擎提取参数取值的方法 getArgs() { return this.args; }, }, }; </script> <style> </style> |
...
- template标签中,需要提供画布预览、编辑区和图标状态的标签。
- script标签中
- data()返回需要给出一些基本属性:name,args,此外为了和标签配合,需要设置一些控制变量,例如t_preview,t_edit。 edit和args.title
- 需要提供如下的一些函数实现:getFormName,setArgs,getArgs,getEditBox。
...
- template标签中,只需要提供真实状态展示标签即可。
- script标签中,需要提供至少3个函数的实现:setDisplayType,setArgs,getArgs。script标签中,需要提供至少3个函数的实现:getFormName,setDisplayType,setArgs,getArgs。
调试中,DWFSDK需依靠assemble-to.yaml来实现自动装配,设置要点是:
- forms: { 【vue文件】:【分类】, ...【vue文件】:【分类】}
- dependencies: {【NPM包名】/【版本】,...}
4 附件
建模端入门插件:
View file | ||||
---|---|---|---|---|
|
应用端入门插件:
...