如何以拖拽方式生成Vue用户界面

前言

前一阵子拜访了一些小伙伴，大家都表示苦前端太久了，需要花费不少时间在前端开发上。本着在不损失灵活性的前提下尽可能提高开发效率的原则，作者尝试在框架内集成了拖拽方式生成vue用户界面的功能作为补充，以方便快速生成增删改查界面，也可以用于大屏展示及简单的网页制作。

一、技术原理

1.1 布局

  目前仅实现了基于vue-grid-layout的网格布局，设计画布上的每个组件动态加载至对应的griditem内，同时根据组件配置绑定相应的prop及事件。

1.2 组件

  每个组件的配置抽象为以下示例的接口，用于描述组件的属性及相关的布局位置信息，注意分为设计时与运行时属性，运行时属性仅在预览与运行时动态生成。

1.3 状态

  光有组件及布局只能在界面上呈现，还需要绑定业务数据，所以每个视图模型都有对应的状态设置（即vue的data)，描述状态的名称、类型及相应的设置值的操作，视图的状态在运行时会根据设置从后端加载数据或置为默认值。

1.4 事件

  某些如button类的组件可以绑定相应的事件处理，目前事件处理主要分为加载数据（loaddata)及递交数据(postdata)两类，分别对应于从后端读数据至当前状态与递交当前状态数据至后端处理。

1.5 工具箱

  可供拖放至画布的组件由全局配置"vuewidgets"定义，分为全局注册的组件及自定义组件，自定义组件可以是代码方式的视图模型，也可以是可视化方式的视图模型。

二、效果演示

  注意新建视图模型时类型选择：vue visual，原来的代码方式为vue code。

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

总结

到此这篇关于如何以拖拽方式生成vue用户界面的文章就介绍到这了,更多相关拖拽生成vue用户界面内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！