前端设计vue+layui表单设计3.0
之前表单设计基于layui，用的是h5，后面发现不是很理想，加载过程中有一些不尽人意，因此思来想去准备从新设计。
在之前的基础上我们得先了解表单form，常见的form表单里面有input、radio、checkbox、textarea、select等，当然啦还有一些将这些组合使用，用过layui的朋友们应该知道，在form表单中只要定义一个name，可通过data.field获取表单中所填值，form.val(“id”,{})可对表单赋值。知道了这些我们就需要想办法怎么生成表单中的这些东东。竟然如此那就开始干活。
# 第一步：安装vue
npm install -gvue-cli
# 初始项目
vue init webpack webos
# 进入webos
cd webos
# 安装依赖
$ npm install //下载依赖包(一般启动前都需要的)
# 安装layui
npm install layui-src
# 第五步：在main.js中import layui
importlayui from 'layui-src'
# 第6步：安装vuedraggable用于拖拽实现拖拽表单
npm ivuedraggable
# 喜欢使用jquery可用安装
npm install jquery
# 安装axios
npm install--save axios
# 安装vue-echarts
npm installvue-echarts --save
npm install--save @vue/composition-api
# 安装字体
npm ifont-awesome
#安装动画
npm i animate
npm ianimate.css@3.5.0
npm install--save crypto-js
接下来在mian.js引入资源如下图所示。
初步想法是每一个组件做单独封装，需要生成时，将组件拖拽到表单，点击拖拽的组件可设置它的name、id等属性。我现在封装了一下几个组件根据类型进行封装。
简单说一下一个input是怎么封装的。我们选看看input有哪些属性如下画红圈部分，他有label后面跟着一个文本框。
首先得有一个初始的文本框属性，这里需要想想它有哪些属性，它可以是用户能够输入、禁止输入、可见、可隐藏等这些属性，所有我们可以定义一个数组将这些对象全部装到这个数组中，然后通过用户拖拽将其中一个对象拖拽到表单中，表单对这个对象进行渲染。定义一个文本框的对象，如下：
有了这些属性最基本一个输入框就可以实现了，定义一个iteminput组件如下，通过父组件传过来值进行渲染。
一个简单的文本框就完成了，一个文本框他还有其他属性比如说时间选择，我们只需要判断这个文本框是否是时间类型直接渲染，简简单单嘛。
有了这一个input其他的是不是就更简单了，最常见的那就是编辑器了ueditor怎么封装一个编辑器了首先还是需要下载百度编辑器，可到百度编辑器官网下载，可以参考一下开源的vue-ueditor-wrap，因为我用的也是这个，也是一样的思路定义一个ueditor组件。
还有一下是利用表单中input中的name比如说一个颜色选择，用户选择颜色后给这个input框赋值。有个这个你看对其随心所欲。
本次也是干了两天把这个表单中的这个常用组件给封装出来了我们看看效果吧。
先看看一个丑陋的设计界面如下图，我是将设计的这个数组保存到数据库中。
最后来说说如何把这些组件给渲染出来的，我们新建一个表单组件，该组件需要接受表单id，通过表单id获取到表单所需要的渲染的组件。就是这么简简单单。
那么当遇到编辑怎么办呢？我们是否已经有表单，那么获取数据就可以对表单赋值了。之前我提过form.val(“id”,{})可对表单赋值，这里是此方法赋值时只会对定义name进行赋值，我们可对表单中data.data.value属性赋值就可完美解决。
最重要的来了我们怎么提交到数据库中，表单数据肯定表是不一样的，每一个表单都是不一样的，这是表单属性中保存了需要保存到那张表中。后端怎么实现后期在讲了。
一饱眼福 http://mpvideo.qpic.cn/0bf2x4aasaaa6maeq2t64rqvbp6dbg7qacia.f10002.mp4?dis_k=765843d2f0cac318d7d26d90c61b87a6&dis_t=1660543662&vid=wxv_2115136052939030528&format_id=10002&support_redirect=0&mmversion=false
一饱眼福
http://mpvideo.qpic.cn/0bf264aasaaacmaet3l645qvb56dbh3qacia.f10002.mp4?dis_k=949700f7fdabbb07f237a3fd938375df&dis_t=1660543662&vid=wxv_2115134323023511556&format_id=10002&support_redirect=0&mmversion=false