项目地点

简介

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-maker

import 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>

假如对你有协助，请给个Star