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