woai3c/vue-form-maker

Vue 表单生成器——动态生成表单组件

简介

Vue 动态生成表单组件，可以根据数据配置表单，使用的UI库是iView。

有问题或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">
    <!-- 在 HTML 中使用组件要这样使用，不能这样用 <vue-form-maker :options="options"/>，否则后面的元素渲染不出来 -->
    <vue-form-maker :options="options"></vue-form-maker>
</div>

<script src="vue.js"></script>
<script src="iview.js"></script>
<script src="vue-form-maker.js"></script>

License

MIT

vue-form-maker's Issues

请教vue-form-maker在微信小程序如何使用？

如题。

另外，想要一套代码同时生成web和小程序，需要怎么配置呢？

非常感谢！

vue-form-maker非常棒！

Button没有事件么

Button没有关于click的event?

请问Iview与这个组件的关联关系是如何形成的？

你好，最近在研究动态表单，看到你的方案觉得很好，但是对于它与第三方组件框架的关系如何形成有点迷茫，求指教？

大佬，有个问题想请教，动态校验怎么是加载config文件里面吗？还是需要二次开发呢？

所有在线demo全都502报错

所有demo都打不开了

上传组件的下载问题，图片或者txt会直接打开

我们在使用upload上传组件时，当上传了图片或者txt文件，点击下载图片或者txt文件时会直接打开文件在页面上而不是下载，我们希望能够做到下载

vue-form-maker表单验证的时候，有些元素的验证时好时坏

vue-form-maker表单验证的时候，有些元素的验证时好时坏，而且不是每次某个元素。

变名字了吗

以前不是叫vue-generate-form吗 现在都变了吗?

提交按钮

submit 提交按钮 success 函数里面拿不到this 这个vue 实例

怎么添加events属性

例如select组件，我需要添加on-change事件，但是select props我怎么加都没反应。。

502 http code

demo link is 502 http code for runjs

Demos are not working

Nothing appears in the bottom right box.

https://runjs.cn/code/3fapiha3
https://runjs.cn/code/cllq3lvm