vue动态生成表单组件vue-form-maker
时间:2022-07-25
本文章向大家介绍vue动态生成表单组件vue-form-maker,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
项目地址
简介
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 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)
<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
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 在grant语句之后要跟着flush privileges吗?
- Python实现数据写入 Excel 的三种模块!
- redis的两种持久化的机制,你真的了解么?
- 绝对能让你彻底明白的Redis的内存淘汰策略
- redis缓存穿透穿透解决方案-布隆过滤器
- Python动态图见得多了?Excel:亦可赛艇!我可是身经百战了
- LinkedList 源码剖析
- ArrayDeque 源码解读
- Apache Kafka 真的只是消息引擎吗?
- 注册Spring Bean:如何将BeanDefinition注册到IoC容器?
- 新冠病毒 - 数据采集、模型预测
- 初始化Spring Bean:Bean初始化有哪些方式?
- 为什么我做的网页总是卡?前端性能优化规则要点
- 递归
- 高阶函数和闭包