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 iView from 'iview'
import VueFormMaker from 'vue-form-maker'
import 'iview/dist/styles/iview.css'

Vue.use(iView)
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