vue组件拖拽自定义界面,vue拖拽组件生成前端页面

　　本文主要介绍如何通过拖拽生成Vue用户界面的相关信息。通过示例代码详细介绍，对您的学习或工作有一定的参考价值。下面让我们跟随边肖一起学习。

前言

　　前阵子拜访了几个小伙伴，大家都说受前端折磨太久了，需要在前端开发上花很多时间。本着尽可能提高开发效率又不失灵活性的原则，作者尝试在框架中集成拖拽生成Vue用户界面的功能作为补充，方便添加、删除、修改界面的快速生成，也可用于大屏显示和简单的网页制作。

一、技术原理

1.1 布局

　　目前只实现了基于vue-grid-layout的网格布局，将设计画布上的每个组件动态加载到对应的GridItem中，根据组件配置绑定对应的道具和事件。

　　！-src/components/Designers/View/vuevisualdesigner . vue-

　　grid-layout ref= gridLayout class= editor canvas :layout . sync= layout

　　:col-num= layout option . colnum :row-height= layout option . row height

　　:is-draggable=！ preview :is-resizable=！预览 @ dragover . native= onDragOverGrid

　　grid-item class= widget panel v-for= item in layout :x= item . x :y= item . y :w= item . w

　　:h= item . h :I= item . I :key= item . I

　　@ resize= onItemResize(item) @ container-resize= onItemResize(item)

　　div v-if=！preview class= widgetOverlay @ click= onSelectWidget(item)/div

　　！-动态小部件-

　　component:ref= item . I :is= item . c :style= makeWidgetStyle(item)

　　 v-model= runState[item . m] v-bind= item . p v-on= item . a

　　/组件

　　/网格-项目

　　/网格布局

1.2 组件

　　每个组件的配置都抽象为下面这个例子的接口，用来描述组件的属性和相关的布局位置信息。注意，它分为设计时和运行时属性，运行时属性只在预览和运行时动态生成。

　　//src/runtime/ivu visual . ts

　　导出接口IVueLayoutItem {

　　/* *组件名称，例如：Input */

　　n:字符串；

　　/** v-text */

　　t？字符串；

　　/** v型车*/

　　m？字符串；

　　/* *组件道具例如：{size: mini} */

　　p:对象；

　　/* * Props例如：{data::data} */

　　b？对象；

　　/* *设计时事件定义，例如：{click: {IVueEventAction}} */

　　e？对象；

　　/* *在运行时为v-on绑定生成的事件处理程序，例如：{click: function(){.}} */

　　答？对象；

　　/* *运行时动态加载的Vue组件*/

　　c？任何；

　　}

　　/* *基于网格的布局项目*/

　　导出接口IVueGridLayoutItem扩展了IVueLayoutItem {

　　I:字符串；

　　x:数字；

　　y:数字；

　　w:数字；

　　h:数字；

　　}

1.3 状态

　　有只能在界面上呈现的轻组件和布局，需要绑定业务数据。因此，每个视图模型都有相应的状态设置(即Vue的数据)，这些设置描述了状态的名称和类型以及相应设置的操作。在运行时，视图的状态将从后端加载数据，或者根据设置设置为默认值。

　　/* *在设计时查看状态项*/

　　导出接口IVueState {

　　名称：字符串；

　　类型：字符串；

　　/* *设置状态值的操作，例如：调用服务后设置状态值*/

　　值：IVueEventAction

　　}

1.4 事件

　　例如，Button类的一些组件可以与相应的事件处理绑定。目前事件处理主要分为LoadData和PostData两类，对应的是从后端读取数据到当前状态，将当前状态数据提交到后端进行处理。

　　导出类型event action= load data post data RunScript ；

　　导出接口IVueEventAction {

　　/* *操作类型，例如：LoadData */

　　只读类型：EventAction

　　}

　　导出接口IVueLoadDataAction扩展IVueEventAction {

　　/* *状态目标例如：State=LoadService() */

　　状态：字符串；

　　服务：字符串；//后端服务：例如：sys。OrderService.listAll

　　service args:any[]；//eg: [{name: arg1 ，type: string ，value: Rick }]，value是一个表达式

　　}

1.5 工具箱

　　可以拖放到画布上的组件由全局配置“VueWidgets”定义，可以分为全局注册组件和自定义组件。定制组件可以是基于代码的视图模型或可视化视图模型。

　　//自定义小部件配置定义

　　{

　　Name: Table ，//组件名

　　组件“:”系统。“ExTable”，//指向自定义视图模型或全局组件名称(例如：ElInput)

　　图标: fa fa-table ，//工具箱图标

　　 Width: 12，//默认网格宽度

　　 Height: 6，//默认网格高度

　　Props: [//组件的道具

　　{

　　名称:列，

　　类型“:”数组，

　　默认:[]，

　　编辑器“:”sys . extable column editor“/”指向自定义属性编辑器。

　　{

　　名称:行，

　　类型“:”数组，

　　默认:[]

　　}

　　]

　　}

二、效果演示

　　新建视图模型时注意类型选择：Vue Visual，原编码方式为Vue Code。

　　设计界面的功能区域如下图所示：

　　具体操作演示请看短视频。

总结

　　这篇关于如何通过拖动生成Vue用户界面的文章到此为止。关于拖动生成的Vue用户界面的更多相关内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。