共计 907 个字符，预计需要花费 3 分钟才能阅读完成。
简介
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-form
import 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>