码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-01-10 10:46:53      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:https   date   option   doc   options   inpu   按钮   cascade   级联选择   

项目地址

简介

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>

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

标签:https   date   option   doc   options   inpu   按钮   cascade   级联选择   

原文地址:https://www.cnblogs.com/woai3c/p/10247939.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!