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

• 授权协议: MIT
• 开发语言: JavaScript
• 操作系统: 跨平台
• 软件首页: https://github.com/woai3c/vue-generate-form
• 软件文档: https://github.com/woai3c/vue-generate-form/blob/master/doc.md
• 官方下载: https://github.com/woai3c/vue-generate-form

软件介绍

项目地址

简介

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

本文地址：https://codercto.com/soft/d/1729.html