Vue动态生成表单组件(vue-generate-form)

简介Vue动态生成表单组件 可以根据数据配置表单 使用的UI库是iView 整体组件布局方式借鉴了form-create的写法 在此表示感谢在Vue里 一般要用到什么组件或数据 都得提前声明所以要根据数据来生成表单 只能使用Vue的render函数要做这一个组件 其实并不难 看一下Vue官方示例 再找个UI组件库 差不多就能写出来如果对项目有兴趣 可以fork或克隆项目 自行研究 有问题或BUG欢迎提issues文档在线DEMO表单组件Input 输入框Button 按钮Radio 单选框Checkbox 多选框Icon 图标Switch 开关Select 选择器Slider 滑块DatePicker 日期选择器TimePicker 时间选择器Cascader 级联选择器InputNumber 数字输入框Rate 评分Upload 上传ColorPicker 颜色选择器使用在单文件组件中引用npm i vue-generate-formimport iView from ‘iview’import VueGenerateForm from ‘vue-generate-form’import ‘iview/dist/styles/iview.css’Vue.use(iView)Vue.use(VueGenerateForm)<template> <div id=“app”> <VueGenerateForm :options=“options”/> // 或者 <vue-generate-form :options=“options”/> </div></template>在HTML文件中直接引用使用的是dist目录中的vue-generate-form.js<link rel=“stylesheet” type=“text/css” href=“iview.css”><div id=“app”> <vue-generate-form :options=“options”/></div><script src=“vue.js”></script><script src=“iview.js”></script><script src=“vue-generate-form.js”></script>