專案地址

簡介

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>