前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue动态生成表单组件vue-form-maker

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

作者头像
谭光志
发布2020-09-28 10:30:00
2K0
发布2020-09-28 10:30:00
举报
文章被收录于专栏:编程技术分享

项目地址

简介

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 颜色选择器

使用

在单文件组件中引用

代码语言:javascript
复制
npm i vue-form-maker
代码语言:javascript
复制
import VueFormMaker from 'vue-form-maker'
import ViewUI from 'view-design';
import 'view-design/dist/styles/iview.css';
// 如需使用城市数据 可以这样引用
// 省 市 县
import 'vue-form-maker/dist/cityData3Level'
// 省 市
import 'vue-form-maker/dist/cityData2Level'
// 城市数据文件定义了一个全局变量cityData 在项目里直接使用cityData即可

Vue.use(ViewUI)
Vue.use(VueFormMaker)
代码语言:javascript
复制
<template>
    <div id="app">
        <VueFormMaker :options="options"/>
        // 或者 <vue-form-maker :options="options"/>
    </div>
</template>

在HTML文件中直接引用

使用的是dist目录中的vue-form-maker.js

代码语言:javascript
复制
<link rel="stylesheet" type="text/css" href="iview.css">
代码语言:javascript
复制
<div id="app">
    <vue-form-maker :options="options"/>
</div>
代码语言:javascript
复制
<script src="vue.js"></script>
<script src="iview.js"></script>
<script src="vue-form-maker.js"></script>

如果对你有帮助,请给个Star

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 项目地址
  • 简介
  • 文档
  • 在线DEMO
  • 表单组件
  • 使用
    • 在单文件组件中引用
      • 在HTML文件中直接引用
        • 如果对你有帮助,请给个Star
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档