Vue使用distpicker插件實(shí)現(xiàn)省市級下拉框三級聯(lián)動
前言
這幾天做項(xiàng)目,想著用一個(gè)全國省市區(qū)插件,之前就知道有幾種,比如通過JSON文件生成對應(yīng)的區(qū)域下拉框,element-china-are插件,包括distpicker插件
今天主要介紹的是如何使用distpicker插件實(shí)現(xiàn)省市級三聯(lián)跳動
官網(wǎng):distpicker官網(wǎng)
ps:不知為何,我一直進(jìn)不去
安裝distpicker
如果是使用npm,直接以下執(zhí)行命令即可
npm install v-distpicker --save
如果是yarn,可以使用下面的命令執(zhí)行:
yarn add v-distpicker --save
我這里選擇的是npm
這個(gè)包很小,網(wǎng)絡(luò)順暢的情況下10s內(nèi)就完事了。
引用并注冊distpicker
安裝完成之后,就可以使用了
為了方便,我們可以直接在入口文件(main.js)中進(jìn)行全局注冊,這樣不管哪個(gè)組件想要使用,就可以引入并直接使用了
// 引用地區(qū)選擇器distpicker插件 import vdistpicker from 'v-distpicker' // 注冊全局地區(qū)選擇器distpicker組件 Vue.component('v-distpicker', vdistpicker);
使用distpicker
比如我現(xiàn)在這個(gè)組件想要使用我們注冊的公共distpicker 組件,我們就可以直接引用過來進(jìn)行使用了。
<v-distpicker></v-distpicker>
和其他組件一樣,直接使用組件即可:
然后就可以看到效果了:
簡單選擇下區(qū)域:
默認(rèn)選擇
我們可以給組件設(shè)置默認(rèn)選擇:
移動端適配
可以通過設(shè)置type="mobile"來適配移動端
<v-distpicker type="mobile"></v-distpicker>
美化樣式
據(jù)說官網(wǎng)有代碼可以美化下拉框樣式,但是由于我進(jìn)不去官方,就看不到相關(guān)的代碼和效果,反正默認(rèn)有點(diǎn)難看。
取值
我們可以通過以下方式進(jìn)行取值,先綁定對應(yīng)的函數(shù)
<v-distpicker type="mobile" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>
然后在data中聲明省市區(qū)這三個(gè)變量,用于接收下拉框省市區(qū)的值
然后是回調(diào)函數(shù),主要就是對選擇的值賦給data中定義的屬性:
province:'', // 省 city:'', // 市 area:'', // 區(qū) onChangeProvince(province){ this.province = province.value }, onChangeCity(city){ this.city = city.value }, onChangeArea(area){ this.area = area.value },
查看效果,可以在前端或者后端進(jìn)行拼成成一個(gè)整體,這里就不做演示了
總結(jié)
使用起來確實(shí)很方便,但是官網(wǎng)進(jìn)不去加上頁面不太適配,就不打算再使用它了,等到哪天優(yōu)化之后,再回來更新
到此這篇關(guān)于Vue使用distpicker插件實(shí)現(xiàn)省市級下拉框三級聯(lián)動的文章就介紹到這了,更多相關(guān)Vue省市級下拉框三級聯(lián)動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue 地區(qū)選擇器v-distpicker的常用功能
- 詳解VUE-地區(qū)選擇器(V-Distpicker)組件使用心得
- vue實(shí)現(xiàn)三級聯(lián)動動態(tài)菜單
- Vue自定義省市區(qū)三級聯(lián)動
- Vue實(shí)現(xiàn)省市區(qū)三級聯(lián)動
- vue + elementUI實(shí)現(xiàn)省市縣三級聯(lián)動的方法示例
- vue移動端城市三級聯(lián)動組件使用詳解
- 基于Vue2實(shí)現(xiàn)簡易的省市區(qū)縣三級聯(lián)動組件效果
- 使用vue2實(shí)現(xiàn)帶地區(qū)編號和名稱的省市縣三級聯(lián)動效果
相關(guān)文章
vue使用better-scroll實(shí)現(xiàn)橫向滾動的方法實(shí)例
這幾天研究項(xiàng)目時(shí),看到了 better-scroll 插件,看著感覺功能挺強(qiáng),這篇文章主要給大家介紹了關(guān)于vue使用better-scroll實(shí)現(xiàn)橫向滾動的相關(guān)資料,需要的朋友可以參考下2021-06-06vue實(shí)現(xiàn)websocket客服聊天功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)websocket客服聊天功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10vue 使用class創(chuàng)建和清除水印的示例代碼
這篇文章主要介紹了vue 使用class創(chuàng)建和清除水印的示例代碼,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下2020-12-12VUE中路由變化this.$router(push\replace\go\back)解讀
這篇文章主要介紹了VUE中路由變化this.$router(push\replace\go\back),具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10vue 中 element-ui table合并上下兩行相同數(shù)據(jù)單元格
這篇文章主要介紹了vue 中 element-ui table合并上下兩行相同數(shù)據(jù)單元格,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12vue3+vite中報(bào)錯信息處理方法Error: Module “path“ has&nb
這篇文章主要介紹了vue3+vite中報(bào)錯信息處理方法Error: Module “path“ has been externalized for browser compatibility...,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-03-03Vue3結(jié)合TypeScript項(xiàng)目開發(fā)實(shí)踐總結(jié)
本文主要介紹了Vue3結(jié)合TypeScript項(xiàng)目開發(fā)實(shí)踐總結(jié),文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09Vue如何解決子組件data從props中無法動態(tài)更新數(shù)據(jù)問題
這篇文章主要介紹了Vue如何解決子組件data從props中無法動態(tài)更新數(shù)據(jù)問題,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10