vue元件應用與element驗證例項

2021-08-23 11:59:01 字數 2586 閱讀 5968

首頁會所管理

會所設定

新增會所

取 消提交

編輯刪除}

新增會所

地圖 openali(),

//changefile(event),

changefile(event),

//  handlesubmit()

//    console.log(arr)

//  this.$emit('successcbk', arr)

//    this.listobj = {}

//    this.files =

//  this.dialogvisible = false

//  },

//  handlesuccess(response, file)

//    }

//  },

//  handleremove(file)

//    }

//  },

//  beforeupload(file)

//    return new promise((resolve, reject) =>

//      }

//      resolve(true)

//    })

//  },

//changefile2(event),

//根據名字獲取返回true或false get /club//getclubbyname/

getclubbyname(valueclub)).catch((error)=>);

},resetform(addclubform) ,

getallfunctionalzone()/getallfunctionalzone

this.axios.get('/functionalzone/100/getallfunctionalzone').then((res)=>)}},

created(),

mounted(),

watch:;

//            this.form=this.addormdo.oneclub;

//            console.log(this.form)}}

修改會所

地圖 取 消儲存

//根據名字獲取返回true或false get /club//getclubbyname/

getclubbyname(valueclub)).catch((error)=>);

},changefile(event),

resetedit(editform),

getallfunctionalzone()/getallfunctionalzone

this.axios.get('/functionalzone/100/getallfunctionalzone').then((res)=>)}},

created(),

mounted(),

watch:;

//            this.form=this.addormdo.oneclub;

//            console.log(this.form)}}

alimmap.vue

functionalareasmanagement.vue

"functionalzoneid": 0,

"functionalzonename": "綜合區",

"sets": [

"奔跑吧"]}

3.查詢所有功能區get /functionalzone//getallfunctionalzone

4.刪除功能區delete /functionalzone//delfunctionalzone   (

5.查詢功能區名下所有的裝置型別名稱get /functionalzone//getdevicetypebyfunctionzone  (

此處不用,在裝置管理頁使用

首頁功能區管理

功能區管理

}取 消建立}

}取 消

修改修改

刪除新增功能區

新增功能區 

orderset.vue

首頁會所

預約設定

}營業日期 }

休息日:祝您節假日快樂

營業時間 }-}

預約時段 

-->

查詢結果

預約設定

營業非營業

至   

至     

validator:(rule,value,callback)=>, trigger: 'blur' }"

> -->

, trigger: 'blur' }"

至     

快設時段

提交     

validator:(rule,value,callback)=>, trigger: 'blur' }"

>

-->

vue元件發布到npm,類似element ui

1.建立webpack 類專案 vue init webpack demo 2.目錄 3.編寫元件 packages timer就是編寫的元件,跟普通元件無差別,這裡只是用於測試 4.修改package.json 畫紅線部分即是需要修改或新增的內容 5.修改webpack.config.js 畫橢圓...

Vue開發中Element元件的使用問題

1.日期選擇器限制可選的時間範圍 1.1 藍色區域可以通過在元件內新增引數 default value 並且傳值從而實現預設現實的年月,傳值格式如2020 04,同時還可以通過 value format引數 控制資料想要的日期格式。引數使用如圖 1.2 紅色區域的日期的禁止選擇的實現首先如上圖再新增...

vue使用element元件實現選單的摺疊與展開

1.實現效果 1.未摺疊時 2.摺疊後 2.側邊欄 側邊欄選單區 iscollapse 64px 200px background color 333744 text color fff active text color 409eff collapse iscollapse 給collapse動態...