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

cjie 發(fā)布于2019-08-23 14:16 / 1209人閱讀

摘要：項(xiàng)目地址簡介動(dòng)態(tài)生成表單組件可以根據(jù)數(shù)據(jù)配置表單使用的庫是在里一般要用到什么組件或數(shù)據(jù)都得提前聲明所以要根據(jù)數(shù)據(jù)來生成表單只能使用的函數(shù)要做這一個(gè)組件其實(shí)并不難看一下官方示例再找個(gè)組件庫差不多就能寫出來如果對(duì)項(xiàng)目有興趣可以或克隆項(xiàng)目自行研究

項(xiàng)目地址 簡介

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

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

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

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

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

有問題或BUG歡迎提issues

文檔 在線DEMO 表單組件

Input 輸入框

Button 按鈕

Radio 單選框

Checkbox 多選框

Icon 圖標(biāo)

Switch 開關(guān)

Select 選擇器

Slider 滑塊

DatePicker 日期選擇器

TimePicker 時(shí)間選擇器

Cascader 級(jí)聯(lián)選擇器

InputNumber 數(shù)字輸入框

Rate 評(píng)分

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)

在HTML文件中直接引用

使用的是dist目錄中的vue-form-maker.js

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

云服務(wù)器 GPU云服務(wù)器 vue組件 vue組件開發(fā) vue父子組件通訊 vue輪播組件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/100373.html

相關(guān)文章

基于Vue,ElementUI開發(fā)的一款表單設(shè)計(jì)器

摘要：介紹基于開發(fā)的一款表單設(shè)計(jì)器，提高表單開發(fā)效率的利器，讓開發(fā)者從枯燥的表單代碼編寫中解放出來工具地址地址特性可視化配置頁面提供柵格布局，并采用實(shí)現(xiàn)對(duì)齊一鍵預(yù)覽配置的效果一鍵生成配置數(shù)據(jù)一鍵生成代碼，立即可運(yùn)行提供自定義組件滿足用戶自定義介紹基于Vue,ElementUI開發(fā)的一款表單設(shè)計(jì)器，提高表單開發(fā)效率的利器，讓開發(fā)者從枯燥的表單代碼編寫中解放出來工具地址：http://to...

DandJ 2019-08-23 12:13 評(píng)論0 收藏0
vue構(gòu)建動(dòng)態(tài)表單

摘要：概述后臺(tái)管理系統(tǒng)里面有非常多的表單需求，我們希望能夠通過寫一個(gè)格式的數(shù)據(jù)，通過的循環(huán)動(dòng)態(tài)地去渲染動(dòng)態(tài)表單。我結(jié)合的控件的下拉框輸入框，時(shí)間選擇控件和，做了一個(gè)動(dòng)態(tài)表單。概述后臺(tái)管理系統(tǒng)里面有非常多的表單需求，我們希望能夠通過寫一個(gè)json格式的數(shù)據(jù)，通過vue的循環(huán)動(dòng)態(tài)地去渲染動(dòng)態(tài)表單。并且能夠在外部得到渲染出來的表單的數(shù)據(jù)，可以對(duì)表單進(jìn)行重置操作。我結(jié)合element ui的控件...

BlackHole1 2019-08-26 12:20 評(píng)論0 收藏0
動(dòng)態(tài)生成form表單,不再為表單煩惱

摘要：具有數(shù)據(jù)收集校驗(yàn)和提交功能的表單生成器，支持雙向數(shù)據(jù)綁定和事件擴(kuò)展，組件包含有復(fù)選框單選框輸入框下拉選擇框等表單元素以及省市區(qū)三級(jí)聯(lián)動(dòng)時(shí)間選擇日期選擇顏色選擇滑塊評(píng)分框架樹型文件圖片上傳等功能組件。 form-create 具有數(shù)據(jù)收集、校驗(yàn)和提交功能的表單生成器，支持雙向數(shù)據(jù)綁定和事件擴(kuò)展，組件包含有復(fù)選框、單選框、輸入框、下拉選擇框等表單元素以及省市區(qū)三級(jí)聯(lián)動(dòng),時(shí)間選擇,日期選擇,...

kamushin233 2019-08-22 14:53 評(píng)論0 收藏0
使用form-create輕松生成高品質(zhì)的form表單[附原理圖]

摘要：目的是節(jié)省開發(fā)人員在表單頁面上耗費(fèi)的時(shí)間，從而更專注于功能開發(fā)。使用可快速便捷的生成日常開發(fā)中所需的各種表單?？赏ㄟ^后端返回生成規(guī)則，進(jìn)行渲染。 form-create 具有動(dòng)態(tài)渲染、數(shù)據(jù)收集、校驗(yàn)和提交功能的表單生成器，支持雙向數(shù)據(jù)綁定、事件擴(kuò)展以及自定義組件，可快速生成包含有省市區(qū)三級(jí)聯(lián)動(dòng)、時(shí)間選擇、日期選擇等17種功能組件。已兼容iview2.和iview3.版本 Github...

phodal 2019-08-23 14:13 評(píng)論0 收藏0
vue2 中如何實(shí)現(xiàn)動(dòng)態(tài)表單增刪改查

摘要：最近項(xiàng)目中遇到的需求是要操作大量的表單，之前的項(xiàng)目中有做過這方的研究，只不過是用來操作。添加操作上面的只是其中一個(gè)動(dòng)態(tài)列表。最近項(xiàng)目中遇到的需求是要操作大量的表單，之前的項(xiàng)目中有做過這方的研究，只不過是用jquery來操作。項(xiàng)目A 先簡單說說以前項(xiàng)目A中的應(yīng)用場景，可能有小伙伴兒也遇到相同的需求。A項(xiàng)目是公司的OA系統(tǒng)中有的項(xiàng)目，是用java的jsp渲染的頁面，需求是要改成：嵌入A...

StonePanda 2019-08-20 16:59 評(píng)論0 收藏0