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

MIT
JavaScript
跨平台
2018-12-28
谭光志

项目地址

简介

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>
的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

Vue 自动化表单相关资料

1.使用vue自动化表单 2.Vue可视化,Vue代码生成,Vue动态表单 3.前端表单进阶之路:通过 Vue.js 实现表单可配置化 4.使用Vue动态生成form表单 5.autoform-devtool 6.Vue.js实践:实现多条件筛...

2018/07/17 09:28
51
0
vue

vue

2018/04/23 00:16
19
0
layui select 与 vue 的结合使用

1. 创建一个select元素 <form class="layui-form layui-form-pane all-account-filter-form"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-la......

2018/10/29 23:18
333
0
Spring中formdata方式提交json对象和file之一

# 问题 想使用vue-resource表单提交方式到spring,这个表单中包含json对象和file对象。 # 思路 将json对象和file对象都放到表单提交方式里面的```Request Payload```中,并在```Request Payl...

2018/06/12 15:54
101
0
VUE Cookbook 系列:实现可配置组合表单

本案例将会讲解如何使用 vue.js + ElementUI 开发一个简单的 可配置组合表单 Demo。 示例源代码 github 操作演示: 在左侧新建表单区块,选择区块标题和表单组件类型后点击确定,会在中间区域...

2018/08/01 12:53
56
1
springboot整合vue小试牛刀

序 本文主要研究一下如何在springboot工程整合vue maven <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> ......

2018/09/24 16:55
181
0
DevExpress v18.1新版亮点——DevExtreme篇(四)

用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容。本文将介绍了DevExtreme JavaScript Controls v18.1 的新功能,快来下载试用新版本!点击下载...

2018/09/21 11:51
17
0
Vue 初学指南

前言 一直做java开发,新公司,分配了前端的工作,一脸懵逼,有朋友说:你可以跑路了,肯定很坑 更多时候遇到这样的情况害怕的不是自己不会等问题,而是更怕被技术甩掉一个世纪线------好好学习,天天...

2018/11/06 16:28
21
0
vue插件

UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vu...

2018/12/25 10:43
32
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部