vue-form-makerVue 动态生成表单组件-技术圈

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

联合创作 · 2023-09-19 18:20

项目地址

简介

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

编辑分享