前阵子拜访了一些小伙伴，大家都说前端工作太辛苦，开发前端花了很多时间。基于尽可能提高开发效率而不损失灵活性的原则，作者尝试在框架中集成拖拽生成Vue用户界面的功能作为补充，以方便快速生成add-delete-check界面，也可用于大屏显示和简单的网页制作。
00-1010
一、技术原理
目前只实现了基于vue-grid-layout的网格布局，将设计画布上的每个组件动态加载到对应的GridItem中，并根据组件配置绑定对应的prop和事件。！-src/组件/设计者/视图/vuevisaualdesigner . vue-
网格布局ref=' gridLayout ' class=' editorCanvas ' : layout . sync=' layout '
: col-num=' layout option . colnum ' : row-height=' layout option . row height '
:is-draggable='！preview ' : is-resized='！preview ' @ drago over . native=' onDragOverGrid '
grid-item class=' widgetPanel ' v-for='布局中的项' : x=' item . x ' :y=' item . y ' : w=' item . w '
:h=' item . h ' : I=' item . I ' : key=' item . I '
@ resize=' OnemResize(item)' @ container-resize=' OnemResize(item)'
div v-if='！preview ' class=' widgetOverlay ' @ click=' onSelectWidget(item)'/div
！-动态小部件-
组件： ref=' item . I ' : is=' item . c ' : style=' makeWidgetStyle(item)
v-model=' RunState[item . m]' v-bind=' item . p ' v-on=' item . a '
{{ item.t }}
/组件
/grid-项目
/网格布局
1.1 布局
每个组件的配置在下面的示例中抽象为接口，用于描述组件的属性和相关的布局信息。请注意，它可以分为设计时属性和运行时属性，运行时属性仅在预览和运行时期间动态生成。//src/runtime/IVueVisual.ts
导出接口IVueLayoutItem {
/* *组件名称eg:输入*/
n:字符串；
/** v-text */
t？字符串；
/** v型*/
m？字符串；
/* *组件propseg : { Size : ' mini ' } */
p:对象；
/* *组件绑定的propseg : { data : ' : data ' } */
b？对象；
/* *设计时事件定义eg 3360 { click 3360 { ivueeventaction } } */
e？对象；
/* *运行时为v-on绑定EG: {Click3360函数()}生成的事件处理程序.}} */
a？对象；
/* * Vue组件在运行时动态加载*/
c？任何；
}
/* *基于网格的布局项目*/
导出接口IVueGridLayoutItem扩展了IVueLayoutItem {
i:字符串；
x:号；
y:号；
w:号；
h:号；
}
00-1010灯光组件和布局只能呈现在界面上，业务数据需要绑定。因此，每个视图模型都有对应的状态设置(即Vue的数据)，描述了状态的名称和类型以及对应设置值的操作。在运行时，视图的状态将从后端加载数据，或者根据设置将其设置为默认值。
/* *在设计时查看状态项*/
导出接口IVueState {
Name:字符串；
键入：字符串；
/* *设置状态值的操作，eg:调用服务后设置状态值*/
Value: IVueEventAction
}
00-1010按钮类等一些组件可以绑定相应的事件处理。目前事件处理主要分为LoadData和PostData两类，分别对应从后端读取数据到当前状态，并将当前状态数据提交给后端处理。
导出类型event action=' LoadData ' | ' post data ' | ' RunScript '；
导出接口IVueEventAction {
/* *操作类型，eg:加载数据*/
只读类型：事件操作；
}
导出接口IVueLoadDataAction扩展了IVueEventAction {
/* *状态目标eg: State=LoadService() */
State:字符串；
Service:字符串；//后端服务： eg 3360 sys . order service . list all
serviceargs 3360 any[]；//eg3360 [{name :' arg1 '，type :' string '，value :'' cqdzh''}]，value是表达式。
}
00-1010可拖放到画布上的组件由全局配置“VueWidgets”定义，该配置可分为全局注册组件和自定义组件。自定义组件可以是代码视图模型，也可以是可视化视图模型。
//自定义小部件配置定义
{
名称' : '表'，//组件名称
组件“:”系统。EXTABLE '，//指向自定义视图模型或全局组件名称(EG3360ELINPUT)
图标' : 'fa fa-table '，//工具箱图标
宽度' : 12，//默认网格宽度
高度' : 6，//默认网格高度
道具' : [//组件道具
{
名称' : '列'，
类型' : '数组'，
默认值' : []，
编辑器“:”sys . extablecolumn editor//指向自定义属性编辑器。
},
{
名称' : '行'，
类型' : '数组'，
默认' : []
}
]
}
00-1010新建视图模型时注意类型选择：Vue Visual，原代码模式为Vue Code。
设计界面的功能区如下图：所示。
具体操作演示请看短视频。
00-1010作者的非专业前端，这里只是一个参考，希望感兴趣的伙伴继续完善，比如实现自由布局(绝对定位)和组件动画。另一方代码对另一方代码进行文本编码并不容易。作者需要你的支持。请点赞推荐！