0%

基于Vue + Vue.Draggable实现自定义表单控件

新项目需要用到工作流设定 + 自定义表单控件,这里列出了自定义表单控件的代码实现,可实现自定义表单控件,可拖拽排序,自定义属性

项目 UI 组件库为 iView, Element UI 可根据项目内代码进行适当修改达到适用

效果预览

image

image

image

运行使用

1
2
3
4
5
6
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

文件目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
.
├── README.md
├── build
├── config
├── dist
├── index.html
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ ├── components
│ │ ├── custom_form //自定义表单组件
│ │ │ ├── FormList.js //表单列表
│ │ │ ├── ItemIcon.js //表单图标配置
│ │ │ ├── Render.js //表单列表渲染
│ │ │ ├── components //表单公用组件
│ │ │ │ └── images //上传组件
│ │ │ │ └── upload.vue
│ │ │ ├── config //配置文件
│ │ │ │ ├── area.js //地区配置
│ │ │ │ └── trigger.js //表单验证触发事件
│ │ │ ├── control //表单控件列表
│ │ │ ├── Address.js //地区选择
│ │ │ ├── Cascader.js //多级联动
│ │ │ ├── CheckBox.js //多选框
│ │ │ ├── DatePicker.js //时间选择器
│ │ │ ├── Hr.js //hr标签
│ │ │ ├── Input.js //输入框
│ │ │ ├── P.js //p标签
│ │ │ ├── Radio.js //单选框
│ │ │ ├── Select.js //下拉选择框
│ │ │ ├── Text.js //文本域
│ │ │ ├── Title.js //标题
│ │ │ └── images.js //上传控件
│ │ │ └── index.js //控件注册
│ │ ├── index.vue //自定义表单页面
│ │ └── render.vue //表单渲染,数据回填页面
│ ├── main.js //入口文件
│ └── router //路由配置
│ └── index.js
└── static //静态数据模版
├── label.1.json
├── label.12.json
├── label.14.json
├── label.17.json
├── label.19.json
├── label.3.json
├── label.5.json
├── label.8.json
└── label.json

相关代码:

相关链接: