页面历史

<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 v-else :addinName="name">
   		<span style="text-align: center;"> 			<div class="form-addin-icon"> 				<!-- 控件拖放区图标的样式如果上述条件均不满足的进入此处 -->
				<i class="iconfont">&#xe6a4;</i>
			</div>
			<!-- 在控件拖放区图标的名字 -->
			<div class="form-addin-name">入门控件</div>
		</span>
	</section>
</
    </section>
</template>

<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: 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;
		},
		// 返回控件绑定的目标属性，如果没有绑定返回undefined或者null
		getFormName() {
			return this.args.name;
		},
	},
};
</script>

<style>
</style>