使用Vue動態生成form表單的實例代碼

具備數據收集、校驗和提交功能的表單生成器，包含複選框、單選框、輸入框、下拉選擇框等元素以及,省市區三級聯動,時間選擇,日期選擇,顏色選擇,文件/圖片上傳功能，支持事件擴展。

歡迎你們star學習交流：github地址

示例

[](https://files.jb51.net/file_i...

https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg

安裝

`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``});`
`
歡迎加入全棧開發交流划水交流圈：582735936
面向划水1-3年前端人員
幫助突破划水瓶頸，提高思惟能力
`});`
`//動態添加表單元素`
`$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:``""``,`
`pros: {`
`"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"``,``//必填!`
`//lbel名稱`
`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``,`
`},`
歡迎加入全棧開發交流划水交流圈：582735936
面向划水1-3年前端人員
幫助突破划水瓶頸，提高思惟能力
`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、1五、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``,`
`},`
歡迎加入全棧開發交流划水交流圈：582735936
面向划水1-3年前端人員
幫助突破划水瓶頸，提高思惟能力
`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)'``,``'[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"``: {},`
`//是否支持多選文件`
`"ultiple"``:` `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](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將不顯示`
`hadleIcon:``'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``,`
`},`
歡迎加入全棧開發交流划水交流圈：582735936
面向划水1-3年前端人員
幫助突破划水瓶頸，提高思惟能力
`//表單提交事件`
`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表單的實例代碼，但願對你們有所幫助，若是你們有任何疑問請給我留言