• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

vue-formbuilder: 自定义表单控件,可拖拽排序,自定义属性

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

vue-formbuilder

开源软件地址:

https://gitee.com/biabia123456/vue-formbuilder

开源软件介绍:

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

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

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

效果预览

image

image

image

运行使用

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

文件目录

.├── README.md├── build├── config├── dist├── index.html├── package.json├── src│   ├── App.vue│   ├── assets│   ├── components│   │   ├── custom_form             //自定义表单组件│   │   │   ├── FormList.js         //表单列表    │   │   │   ├── ItemIcon.js         //表单图标配置│   │   │   ├── Render.js           //表单列表渲染│   │   │   ├── components          //表单公用组件│   │   │   │   └── Uploads         //上传组件│   │   │   │       └── 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        //标题│   │   │       └── Uploads.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

相关插件:


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap