vue-form-makerVue 動(dòng)態(tài)生成表單組件

項(xiàng)目地址

簡(jiǎn)介

Vue動(dòng)態(tài)生成表單組件 可以根據(jù)數(shù)據(jù)配置表單 使用的UI庫(kù)是iView

在Vue里 一般要用到什么組件或數(shù)據(jù) 都得提前聲明

所以要根據(jù)數(shù)據(jù)來(lái)生成表單 只能使用Vue的render函數(shù)

要做這一個(gè)組件 其實(shí)并不難 看一下Vue官方示例 再找個(gè)UI組件庫(kù) 差不多就能寫(xiě)出來(lái)

如果對(duì)項(xiàng)目有興趣 可以fork或克隆項(xiàng)目 自行研究

有問(wèn)題或BUG歡迎提issues

文檔

在線DEMO

表單組件

• Input 輸入框
• Button 按鈕
• Radio 單選框
• Checkbox 多選框
• Icon 圖標(biāo)
• Switch 開(kāi)關(guān)
• Select 選擇器
• Slider 滑塊
• DatePicker 日期選擇器
• TimePicker 時(shí)間選擇器
• Cascader 級(jí)聯(lián)選擇器
• InputNumber 數(shù)字輸入框
• Rate 評(píng)分
• 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';
// 如需使用城市數(shù)據(jù) 可以這樣引用
// 省 市 縣
import 'vue-form-maker/dist/cityData3Level'
// 省 市
import 'vue-form-maker/dist/cityData2Level'
// 城市數(shù)據(jù)文件定義了一個(gè)全局變量cityData 在項(xiàng)目里直接使用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>

如果對(duì)你有幫助，請(qǐng)給個(gè)Star