溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何使用Vue動態生成form表單，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
具有數據收集、校驗和提交功能的表單生成器，包含復選框、單選框、輸入框、下拉選擇框等元素以及,省市區三級聯動,時間選擇,日期選擇,顏色選擇,文件/圖片上傳功能，支持事件擴展。
示例
安裝
npm install form-create
OR
git clone https://github.com/xaboy/form-create.git cd form-create npm install
引入
<!-- import Vue --> <script src="node_modules/vue/dist/vue.min.js"></script> <!-- import iview --> <link rel="stylesheet" href="node_modules/iview/dist/styles/iview.css" rel="external nofollow" > <script src="node_modules/iview/dist/iview.min.js"></script> <!-- 省市區三級聯動json數據 --> <script src="/district/province_city_area.js"></script> <!-- 模擬數據 --> <script src="mock.js"></script> <!-- import formCreate --> <script src="dist/form-create.min.js"></script>
注意! iview版本請>=2.9.2,否則可能存在問題
使用
let rules = window.mock;
new Vue({
mounted:function(){
let $f = this.$formCreate(mock,
{
onSubmit:function (formData) {
console.log(formData);
$f.submitStatus({loading:true});
}
});
//動態添加表單元素
$f.append($r,'goods_name');
}
})$formCreate 參數
rules 表單生成規則 [inputRule,selectRule,...]
options 初始化配置參數 (詳細見底部 createOptions)
$f 實例方法
formData() 獲取表單的value
getValue(field) 獲取指定字段的value
changeField(field,value) 修改指定字段的value
resetFields() 重置表單
destroy() 銷毀表單
removeField(field) 刪除指定字段
fields() 獲得表單所有字段名稱
submit() 表單驗證通過后提交表單,觸發onSubmit事件
validate(successFn,errorFn) 表單驗證,如果驗證通過執行successFn,未通過則執行errorFn
validateField(field,callback) 表單驗證指定字段
$f.validateField(field,(errMsg)=>{
if(errMsg){
//TODO 驗證未通過
}else{
//TODO 驗證通過
}
});prepend(rule,field = undefined) 在field的字段之前輸入指定表單元素,不傳入field默認在第一個
$f.prepend({
type:"input",
title:"商品簡介",
field:"goods_info",
value:"",
props: {
"type": "text",
"placeholder": "請輸入商品簡介",
},
validate:[
{ required: true, message: '請輸入商品簡介', trigger: 'blur' },
],
});append(rule,field = undefined) 在field的字段之前輸入指定表單元素,不傳入field默認在最后一個
$f.append({
type:"input",
title:"商品簡介",
field:"goods_info",
value:"",
props: {
"type": "text",
"placeholder": "請輸入商品簡介",
},
validate:[
{ required: true, message: '請輸入商品簡介', trigger: 'blur' },
],
});submitStatus(props) 修改表單提交按鈕狀態
$f.submitStatus({
//按鈕類型，可選值為primary、ghost、dashed、text、info、success、warning、error或者不設置
type:"primary",
//按鈕大小，可選值為large、small、default或者不設置
size:"large",
//按鈕形狀，可選值為circle或者不設置
shape:undefined,
//開啟后，按鈕的長度為 100%
long:true,
//設置button原生的type，可選值為button、submit、reset
htmlType:"button",
//設置按鈕為禁用狀態
disabled:false,
//設置按鈕的圖標類型
icon:"ios-upload",
//按鈕文字提示
innerText:"提交",
//設置按鈕為加載中狀態
loading:false
})btn.loading() 讓表單提交按鈕進入loading狀態
btn.finish() 讓表單提交按鈕恢復正常狀態
rules 表單元素規則
hidden 隱藏字段
hiddenRule:
{
type:"hidden",//必填!
//字段名稱
field:"id", //必填!
//input值
value:"14" //必填!
}input 輸入框
inputRule :
{
type:"input",//必填!
//label名稱
title:"商品名稱",//必填!
//字段名稱
field:"goods_name",//必填!
//input值
value:"iphone 7",
props: {
//輸入框類型，可選值為 text、password、textarea、url、email、date
"type": "text", //必填!
//是否顯示清空按鈕
"clearable":false,
//設置輸入框為禁用狀態
"disabled": false,
//設置輸入框為只讀
"readonly": false,
//文本域默認行數，僅在 textarea 類型下有效
"rows": 4,
//自適應內容高度，僅在 textarea 類型下有效，可傳入對象，如 { minRows: 2, maxRows: 6 }
"autosize": false,
//將用戶的輸入轉換為 Number 類型
"number": false,
//自動獲取焦點
"autofocus": false,
//原生的自動完成功能，可選值為 off 和 on
"autocomplete": "off",
//占位文本
"placeholder": "請輸入商品名稱",
//輸入框尺寸，可選值為large、small、default或者不設置
"size": "default",
//原生的 spellcheck 屬性
"spellcheck": false,
},
event:{
//按下回車鍵時觸發
enter:(event)=>{},
//設置 icon 屬性后，點擊圖標時觸發
click:(event)=>{},
//數據改變時觸發
change:(event)=>{},
//輸入框聚焦時觸發
focus:(event)=>{},
//輸入框失去焦點時觸發
blur:(event)=>{},
//原生的 keyup 事件
keyup:(event)=>{},
//原生的 keydown 事件
keydown:(event)=>{},
//原生的 keypress 事件
keypress:(event)=>{},
},
validate:[
{ required: true, message: '請輸入goods_name', trigger: 'blur' },
],
}validate 表單驗證規則，具體配置查看 : https://github.com/yiminghe/async-validator
radio 單選框
radioRule :
{
type:"radio",//必填!
//label名稱
title:"是否包郵",//必填!
//字段名稱
field:"is_postage",//必填!
//input值
value:"0",
//可選參數
options:[
{value:"0",label:"不包郵",disabled:false},
{value:"1",label:"包郵",disabled:true},
],//必填!
props: {
//可選值為 button 或不填，為 button 時使用按鈕樣式
"type":undefined,
//單選框的尺寸，可選值為 large、small、default 或者不設置
"size":"default",
//是否垂直排列，按鈕樣式下無效
"vertical":false,
},
event:{
//在選項狀態發生改變時觸發，返回當前狀態。通過修改外部的數據改變時不會觸發
change:(...arg)=>{},
},
validate:[],
}checkbox 復選框
checkboxRule :
{
type:"checkbox",//必填!
//label名稱
title:"標簽",//必填!
//字段名稱
field:"label",//必填!
//input值
value:[
"1","2","3"
],
//可選參數
options:[
{value:"1",label:"好用",disabled:true},
{value:"2",label:"方便",disabled:false},
{value:"3",label:"實用",disabled:false},
{value:"4",label:"有效",disabled:false},
],//必填!
props: {
//多選框組的尺寸，可選值為 large、small、default 或者不設置
"size":"default",
},
event:{
//只在單獨使用時有效。在選項狀態發生改變時觸發，通過修改外部的數據改變時不會觸發
change:(...arg)=>{},
},
validate:[],
}select 選擇器
selectRule :
{
type: "select",//必填!
field: "cate_id",//必填!
title: "產品分類",//必填!
//input值
value: ["104","105"],
//可選參數
options: [
{"value": "104", "label": "生態蔬菜", "disabled": false},
{"value": "105", "label": "新鮮水果", "disabled": false},
],//必填!
props: {
//是否支持多選
"multiple": true,
//是否可以清空選項，只在單選時有效
"clearable": false,
//是否支持搜索
"filterable": true,
// 暫不支持遠程搜索
// "remote": false, //是否使用遠程搜索
// "remote-method":Function, //遠程搜索的方法
// "loading": false, //當前是否正在遠程搜索
// "loading-text": "加載中", //遠程搜索中的文字提示
//選擇框大小，可選值為large、small、default或者不填
"size":"default",
//選擇框默認文字
"placeholder": "請選擇",
//當下拉列表為空時顯示的內容
"not-found-text": "無匹配數據",
//彈窗的展開方向，可選值為 bottom 和 top
"placement": "bottom",
//是否禁用
"disabled": false,
},
event:{
//選中的Option變化時觸發，返回 value
change:(checked)=>{},
//搜索詞改變時觸發
'query-change':(keyword)=>{},
},
validate:[],
}switch 開關
switchRule :
{
type:"switch",//必填!
//label名稱
title:"是否上架",//必填!
//字段名稱
field:"is_show",//必填!
//input值
value:"1",
props: {
//開關的尺寸，可選值為large、small、default或者不寫。建議開關如果使用了2個漢字的文字，使用 large。
"size":"default",
//禁用開關
"disabled":false,
//選中時的值，當使用類似 1 和 0 來判斷是否選中時會很有用
"trueValue":"1",
//沒有選中時的值，當使用類似 1 和 0 來判斷是否選中時會很有用
"falseValue":"0",
},
slot: {
//自定義顯示打開時的內容
open:"上架",
//自定義顯示關閉時的內容
close:"下架",
},
event:{
//開關變化時觸發，返回當前的狀態 0 | 1
change:(bool)=>{},
},
validate:[],
}DatePicker 日期選擇器
DatePickerRule :
{
type: "DatePicker",//必填!
field: "section_day",//必填!
title: "活動日期",//必填!
//input值, type為daterange,datetimerange value為數組 [start_value,end_value]
value: ['2018-02-20', new Date()],
props: {
//顯示類型，可選值為 date、daterange、datetime、datetimerange、year、month
"type": "datetimerange",//必填!
//展示的日期格式
"format": "yyyy-MM-dd HH:mm:ss",
//日期選擇器出現的位置，可選值為toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
"placement": "bottom-start",
//占位文本
"placeholder":"請選擇獲得時間",
//是否顯示底部控制欄，開啟后，選擇完日期，選擇器不會主動關閉，需用戶確認后才可關閉
"confirm":false,
//尺寸，可選值為large、small、default或者不設置
"size":"default",
//是否禁用選擇器
"disabled":false,
//是否顯示清除按鈕
"clearable":true,
//完全只讀，開啟后不會彈出選擇器
"readonly":false,
//文本框是否可以輸入
"editable":false,
},
event:{
//日期發生變化時觸發,已經格式化后的日期，比如 2016-01-01
change:(value)=>{},
//彈出日歷和關閉日歷時觸發 true | false
'open-change':(bool)=>{},
//在 confirm 模式或 clearable = true 時有效，在清空日期時觸發
clear:(...arg)=>{},
},
validate:[],
}TimePicker 時間選擇器
TimePickerRule :
{
type: "TimePicker",//必填!
field: "section_time",//必填!
title: "活動時間",//必填!
//input值, type為timerange value為數組 [start_value,end_value]
value: [],
props: {
//顯示類型，可選值為 time、timerange
"type": "timerange", //必填!
//展示的時間格式
"format": "HH:mm:ss",
//下拉列表的時間間隔，數組的三項分別對應小時、分鐘、秒。例如設置為 [1, 15] 時，分鐘會顯示：00、15、30、45。
"steps": [],
//時間選擇器出現的位置，可選值為toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end
"placement": "bottom-start",
//占位文本
"placeholder":"請選擇獲得時間",
//是否顯示底部控制欄，開啟后，選擇完日期，選擇器不會主動關閉，需用戶確認后才可關閉
"confirm":false,
//尺寸，可選值為large、small、default或者不設置
"size":"default",
//是否禁用選擇器
"disabled":false,
//是否顯示清除按鈕
"clearable":true,
//完全只讀，開啟后不會彈出選擇器
"readonly":false,
//文本框是否可以輸入
"editable":false,
},
event:{
//時間發生變化時觸發 已經格式化后的時間，比如 09:41:00
change:(checked)=>{},
//彈出浮層和關閉浮層時觸發 true | false
'open-change':(bool)=>{},
//在清空日期時觸發
clear:(...arg)=>{},
},
validate:[],
}InputNumber 數字輸入框
InputNumberRule :
{
type: "InputNumber",//必填!
field: "sort",//必填!
title: "排序",//必填!
//input值
value: 1,
props: {
//最大值
"max": undefined,
//最小值
"min": undefined,
//每次改變的步伐，可以是小數
"step": 1,
//輸入框尺寸，可選值為large、small、default或者不填
"size":"default",
//設置禁用狀態
"disabled":false,
//是否設置為只讀
"readonly":false,
//是否可編輯
"editable":true,
//數值精度
"precision":0,
},
event:{
//數值改變時的回調，返回當前值
change:(value)=>{},
//聚焦時觸發
focus:(event)=>{},
//失焦時觸發
blur:(event)=>{},
},
validate:[],
}ColorPicker 顏色選擇器
ColorPickerRule :
{
type: "ColorPicker",//必填!
field: "color",//必填!
title: "顏色",//必填!
//input值
value: '#ff7271',
props: {
//是否支持透明度選擇
"alpha": false,
//是否支持色彩選擇
"hue": true,
//是否顯示推薦的顏色預設
"recommend": false,
//尺寸，可選值為large、small、default或者不設置
"size":"default",
//自定義顏色預設
"colors":[],
//顏色的格式，可選值為 hsl、hsv、hex、rgb,開啟 alpha 時為 rgb，其它為 hex
"format":"hex",
},
event:{
//當綁定值變化時觸發，返回當前值
change:(color)=>{},
//聚焦時觸發 面板中當前顯示的顏色發生改變時觸發
'active-change':(color)=>{},
},
validate:[],
}Cascader 多級聯動
CascaderRule:
{
type:"cascader",//必填!
title:"所在區域",//必填!
field:"address",//必填!
//input值
value:['陜西省','西安市','新城區'],
props:{
//可選項的數據源，格式參照示例說明
data:window.province || [],//必填!
//選擇后展示的函數，用于自定義顯示格式
renderFormat:label => label.join(' / '),
//是否禁用選擇器
disabled:false,
//是否支持清除
clearable:true,
//輸入框占位符
placeholder:'請選擇',
//次級菜單展開方式，可選值為 click 或 hover
trigger:'click',
//當此項為 true 時，點選每級菜單選項值都會發生變化，具體見上面的示例
changeOnSelect:false,
//輸入框大小，可選值為large和small或者不填
size:undefined,
//動態獲取數據，數據源需標識 loading
loadData:()=>{},
//是否支持搜索
filterable:false,
//當搜索列表為空時顯示的內容
notFoundText:'無匹配數據',
//是否將彈層放置于 body 內，在 Tabs、帶有 fixed 的 Table 列內使用時，建議添加此屬性，它將不受父級樣式影響，從而達到更好的效果
transfer:false,
},
event:{
//選擇完成后的回調，返回值 value 即已選值 value，selectedData 為已選項的具體數據
change:(value, selectedData)=>{},
//展開和關閉彈窗時觸發
'visible-change':bool=>{}
},
validate:[],
}Upload 上傳
UploadRule :
{
type: "Upload",//必填!
field: "pic",//必填!
title: "輪播圖",//必填!
//input值,當maxLength等與1時值為字符串,大于1時值為數組
value: ['http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg','http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'], //input值
props: {
//上傳控件的類型，可選值為 select（點擊選擇），drag（支持拖拽）
"type":"select", //必填!
//上傳文件類型，可選值為 image（圖片上傳），file（文件上傳）
"uploadType":"image", //必填!
//上傳的地址
"action": "", //必填!
//上傳的文件字段名
"name":"",
//上傳時附帶的額外參數
"data":{},
//設置上傳的請求頭部
"headers": {},
//是否支持多選文件
"multiple": true,
//支持發送 cookie 憑證信息
"withCredentials":false,
//不支持
// "showUploadList":false, //是否顯示已上傳文件列表
// "defaultFileList":[], // 默認已上傳的文件列表
//接受上傳的文件類型
"accept":"",
//支持的文件類型，與 accept 不同的是，format 是識別文件的后綴名，accept 為 input 標簽原生的 accept 屬性，會在選擇文件時過濾，可以兩者結合使用
"format":[],
//文件大小限制，單位 kb
"maxSize":undefined,
//可上傳文件數量
"maxLength":1,
//上傳文件之前的鉤子，參數為上傳的文件，若返回 false 或者 Promise 則停止上傳
"beforeUpload":()=>{},
//文件上傳時的鉤子，返回字段為 event, file, fileList
"onProgress":()=>{},
//文件上傳成功時的鉤子，返回字段為 response, file, fileList,若需有把文件添加到文件列表中,在函數值返回即可
"onSuccess":function () {
return 'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg';
}, //必填!
//文件上傳失敗時的鉤子，返回字段為 error, file, fileList
"onError":(error, file, fileList)=>{},
//點擊已上傳的文件鏈接時的鉤子，返回字段為 file， 可以通過 file.response 拿到服務端返回數據
"onPreview":()=>{},
//文件列表移除文件時的鉤子，返回字段為 file, fileList
"onRemove":()=>{},
//文件格式驗證失敗時的鉤子，返回字段為 file, fileList
"onFormatError":()=>{},
//文件超出指定大小限制時的鉤子，返回字段為 file, fileList
"onExceededSize":()=>{},
//輔助操作按鈕的圖標 ,設置為false將不顯示
handleIcon:'ionic',
//點擊輔助操作按鈕事件
onHandle:(src)=>{},
//是否可刪除,設置為false是不顯示刪除按鈕
allowRemove:true,
},
}accept 文件類型： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept
全局配置 createOptions
{
//插入節點,默認document.body
el:null,
//form配置
form:{
//是否開啟行內表單模式
inline:false,
//表單域標簽的位置，可選值為 left、right、top
labelPosition:'right',
//表單域標簽的寬度，所有的 FormItem 都會繼承 Form 組件的 label-width 的值
labelWidth:125,
//是否顯示校驗錯誤信息
showMessage:true,
//原生的 autocomplete 屬性，可選值為 off 或 on
autocomplete:'off',
},
//文件上傳全局配置
upload:{
//上傳文件之前的鉤子，參數為上傳的文件，若返回 false 或者 Promise 則停止上傳
beforeUpload:()=>{},
//文件上傳時的鉤子，返回字段為 event, file, fileList
onProgress:(event, file, fileList)=>{},
//文件上傳成功時的鉤子，返回字段為 response, file, fileList,若需有把文件添加到文件列表中,在函數值返回即可
onSuccess:(response, file, fileList)=>{
// return 'filePath';
},
//文件上傳失敗時的鉤子，返回字段為 error, file, fileList
onError:(error, file, fileList)=>{},
//點擊已上傳的文件鏈接時的鉤子，返回字段為 file， 可以通過 file.response 拿到服務端返回數據
onPreview:(file)=>{},
//文件列表移除文件時的鉤子，返回字段為 file, fileList
onRemove:(file, fileList)=>{},
//文件格式驗證失敗時的鉤子，返回字段為 file, fileList
onFormatError:(file, fileList)=>{},
//文件超出指定大小限制時的鉤子，返回字段為 file, fileList
onExceededSize:(file, fileList)=>{},
//輔助操作按鈕的圖標 ,設置為false將不顯示
handleIcon:'ios-eye-outline',
//點擊輔助操作按鈕事件
onHandle:(src)=>{},
//是否可刪除,設置為false是不顯示刪除按鈕
allowRemove:true,
},
//表單提交事件
onSubmit:(formData)=>{},
//提交按鈕配置,設置為false時不顯示按鈕
submitBtn:{
//按鈕類型，可選值為primary、ghost、dashed、text、info、success、warning、error或者不設置
type:"primary",
//按鈕大小，可選值為large、small、default或者不設置
size:"large",
//按鈕形狀，可選值為circle或者不設置
shape:undefined,
//開啟后，按鈕的長度為 100%
long:true,
//設置button原生的type，可選值為button、submit、reset
htmlType:"button",
//設置按鈕為禁用狀態
disabled:false,
//設置按鈕的圖標類型
icon:"ios-upload",
//按鈕文字提示
innerText:"提交",
//設置按鈕為加載中狀態
loading:false,
}
}關于“如何使用Vue動態生成form表單”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
