一個基於 Vue 的地區選擇器v-distpicker

先扯一下子

上海天氣真炎熱,這讓東北人咋活,聽說園區一位非洲哥們都中暑了,所以我吃完午飯趕忙跑回辦公室(保命要緊),吹着空調,給你們寫着技術文章,別是一番滋味在心頭~ 閒話少說,進入主題!!!前端


重點部分

今天給你們推薦一款好用的vue插件,地區選擇器v-distpicker,接下來我給你們介紹一些經常使用的功能vue

1.引入插件(截圖官網並解釋)
圖片描述ios

2.使用插件(截圖官網並解釋)
圖片描述
就是這麼簡單,只需寫個<v-distpicker></v-distpicker>標籤,就會出現地區選擇器,而且全國匹配城市(有插件就是好,直接拿來用)axios

3.與後端進行接口聯調-------------重點來啦!!!
前端之因此使用地區選擇器,目的就是爲了提交用戶選擇的地區信息,最終經過接口傳遞給後端人員處理(某些時刻,咱們只是數據的搬運工~)
代碼以下:
clipboard.png
解釋:
1.經過這三個事件,監聽用戶輸入省 市 區的信息;
2.在省監聽事件中console信息,輸出了一個對象(插件已封裝好的數據),並獲取該對象的value屬性值;
圖片描述
3.this.formValidate是我初始化的對象,以後把獲取的信息放入formValidate對象,最終一塊兒提交給後端(axios請求),大功告成!
圖片描述後端

收尾

以上就是我爲你們帶來的分享(完了,寫的太投入,午休忘睡覺了),由於並非很難的問題,並且上面也總結的很清晰了,因此我就再也不作最後總結了(嘮叨、墨跡),很是感謝你們耐心看完(感謝繼續加粗)
天氣炎熱,記得給"電腦"潑水降溫哈~
我的微信 在下方! 微信

歡迎你們之後一塊兒交流與學習~
圖片描述學習

相關文章
相關標籤/搜索