...
此外，控件的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。
在应用端，需要注意的实现要点如下：
...