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