vue-form-maker Vue 动态生成表单组件 项目简介
简介Vue动态生成表单组件 可以根据数据配置表单 使用的UI库是iView 在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-form-makerimport iView from 'iview'
import VueFormMaker from 'vue-form-maker'
import 'iview/dist/styles/iview.css'
Vue.use(iView)
Vue.use(VueFormMaker)<template>
<div id="app">
<VueFormMaker :options="options"/>
// 或者 <vue-form-maker :options="options"/>
</div>
</template>在HTML文件中直接引用使用的是dist目录中的vue-form-maker.js<link rel="stylesheet" type="text/css" href="iview.css"><div id="app">
<vue-form-maker :options="options"/>
</div><script src="vue.js"></script>
<script src="iview.js"></script>
<script src="vue-form-maker.js"></script>
import VueFormMaker from 'vue-form-maker'
import 'iview/dist/styles/iview.css'
Vue.use(iView)
Vue.use(VueFormMaker)<template>
<div id="app">
<VueFormMaker :options="options"/>
// 或者 <vue-form-maker :options="options"/>
</div>
</template>在HTML文件中直接引用使用的是dist目录中的vue-form-maker.js<link rel="stylesheet" type="text/css" href="iview.css"><div id="app">
<vue-form-maker :options="options"/>
</div><script src="vue.js"></script>
<script src="iview.js"></script>
<script src="vue-form-maker.js"></script>