Vue前端开发之表单封装

效果图片

Vue前端开发-表单封装

动态表单和子表单 upholdjx/tao-form

简介: 基于 Vue 和 ElementUI 构建的form表单和子表单动态构建,具有动态渲染,参数校验,数据双向绑定

动态表单

目录结构

Vue前端开发-表单封装

表单组件库

文件说明:

config.js 扫描widget下的所有控件根据组件的name动态注册组件

Vue前端开发-表单封装

config.js 文件扫描组件

extends/setting.js 用于控件继承的函数,处理数据绑定的参数及方法处理

Vue前端开发-表单封装

控件继承函数setting.js

基础控件说明,每个控件下面都有个index.js 文件去导入需要使用的文件,加这一步的主要原因是对待不同的UI框架考虑

Vue前端开发-表单封装

index.js 用于导出指定的组件

Vue前端开发-表单封装

inpu/page.js 输入控件文件

需要注意的是每个控件中的name 是必须要的,使用的时候是根据name 使用的如:

定义name: \'tao-input\'
控件使用就是: <tao-input />

动态表单

使用element-ui 的表单组件

Vue前端开发-表单封装

tao-form/index.vue 表单组件封装

动态子表单

Vue前端开发-表单封装

子表单

使用

注册组件

import taoForm from \'./tao-form\'
import taoSubForm from \'./tao-form/subform.vue\'
import \'./tao-form/config.js\' // 为了控件可以独立使用
export default {
  install(Vue) {
    Vue.component(\'tao-form\', taoForm);
    Vue.component(\'tao-subform\', taoSubForm);
  }
}

使用表单

Vue前端开发-表单封装

tao-form 使用

使用子表单

Vue前端开发-表单封装

tao-subform 组件使用

控件独立使用

<tao-input v-model="formValue" />
  
formValue: \'单独控件-输入框\'

说明: 为了避免代码错位,文中代码都用了图片替代,完整代码不方便放地址,获取看第一张图片的描述,码云上搜索后面的英文就可以看到,这是本人在项目开发中有这个需求然后就写了这个,市面上很多类似这样的,项目中很多需要自定义,所以就重新造轮子了

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/procedure/9760.html

发表评论

登录后才能评论