...
| 代码块 | ||
|---|---|---|
| ||
config:
ignore:
info:
part-web:
name: modeler
cname: 建模端
forms: {
helloControl.vue: from/single }
dependencies: {} |
form:标签的格式是：“vue文件名：控件归属类别”，其中归属类别有：
...
| 代码块 | ||
|---|---|---|
| ||
dependencies: { vue-calendar-component: ^2.8.2} |
调试阶段，在命令行内输入devAssemble即可实现开发阶段的自动装配，如果需要清除则输入devClear即可：
...
| 代码块 | ||
|---|---|---|
| ||
<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>
|
首先，在第一个section标签中：首先，在第一个section标签中，t
t_preview：是一个开关变量，表单编辑工具将用其控制是否显示成图标样式，建模端的插件分为预览态和图标态，通过t_preview来区分，:addinName="name"和ref="main"一般情况不可去除。
在本章的例子中只需要显示一个居中的hello world!，所以放入了一个span标签并且手动设置了一个样式。
其次，在第一个section标签中，出现的另一个<span>依赖于t_edit变量控制，这是为了在控件被点击以后在右侧的配置区里展示的样子，在入门插件里没有任何配置项，所以只是给出一个空标签即可，在后续表单控件的进阶开发中将介绍如何利用DWF自动提供标准配置的编辑框。
...
| 代码块 | ||
|---|---|---|
| ||
config:
ignore:
info:
part-web:
name: modeler
cname: 建模端
forms: {
helloControl.vue: from/single }
dependencies: {} |
2.2 控件的应用端
应用端<template>标签
...