...

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: {
				// 用于显示在表单控件树对应的标签，必须设置
				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">
	</section>
</template>

<script>
export default {
	// Vue数据绑定的时候要求返回的结果
	data() {
		return {
			// 插件的名字
			name: "helloControl",
			// 表示是否已经进入画布区
			t_preview: true,
			// 是否显示控件的属性编辑区
			t_edit: false,
			// 属性配置项,按需设置
			args: {
				// 用于显示在表单控件树对应的标签，必须设置
				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;
		},
	},
};
</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: {
				// 用于显示在表单控件树对应的标签，必须设置
				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;
		},
	},
};
</script>

<style>
</style>

...

template标签中，需要提供画布预览、编辑区和图标状态的标签。
script标签中
- data()返回需要给出一些基本属性：name，args，此外为了和标签配合，需要设置一些控制变量，例如t_preview，t_edit。 edit和args.title
- 需要提供如下的一些函数实现：getFormName，setArgs，getArgs，getEditBox。

...

forms: { 【vue文件】:【分类】, ...【vue文件】:【分类】}
dependencies: {【NPM包名】/【版本】，...}

4 附件

建模端入门插件：

View file

name	helloControl.vue
height	250

应用端入门插件：

...

页面树结构

版本比较

旧版本 2

新版本 3

标识

4 附件

页面树结构

页面历史

版本比较

旧版本 2

新版本 3

标识

4 附件