欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue使用distpicker插件實現(xiàn)省市級下拉框三級聯(lián)動

 更新時間:2023年02月22日 15:02:17   作者:小花皮豬  
這篇文章主要介紹了Vue使用distpicker插件實現(xiàn)省市級下拉框三級聯(lián)動,比如通過JSON文件生成對應的區(qū)域下拉框,element-china-are插件,包括distpicker插件,通過代碼講解如何使用distpicker插件實現(xiàn)省市級三聯(lián)跳動,需要的朋友可以參考下

前言

這幾天做項目,想著用一個全國省市區(qū)插件,之前就知道有幾種,比如通過JSON文件生成對應的區(qū)域下拉框,element-china-are插件,包括distpicker插件

今天主要介紹的是如何使用distpicker插件實現(xiàn)省市級三聯(lián)跳動

官網(wǎng):distpicker官網(wǎng)

ps:不知為何,我一直進不去

安裝distpicker

如果是使用npm,直接以下執(zhí)行命令即可

npm install v-distpicker --save

如果是yarn,可以使用下面的命令執(zhí)行:

yarn add v-distpicker --save

我這里選擇的是npm

這個包很小,網(wǎng)絡順暢的情況下10s內(nèi)就完事了。

引用并注冊distpicker

安裝完成之后,就可以使用了

為了方便,我們可以直接在入口文件(main.js)中進行全局注冊,這樣不管哪個組件想要使用,就可以引入并直接使用了

// 引用地區(qū)選擇器distpicker插件
import vdistpicker from 'v-distpicker'
// 注冊全局地區(qū)選擇器distpicker組件
Vue.component('v-distpicker', vdistpicker);

使用distpicker

比如我現(xiàn)在這個組件想要使用我們注冊的公共distpicker 組件,我們就可以直接引用過來進行使用了。

<v-distpicker></v-distpicker>

和其他組件一樣,直接使用組件即可:

然后就可以看到效果了:

簡單選擇下區(qū)域:

默認選擇

我們可以給組件設置默認選擇:

移動端適配

可以通過設置type="mobile"來適配移動端

<v-distpicker type="mobile"></v-distpicker>

美化樣式

據(jù)說官網(wǎng)有代碼可以美化下拉框樣式,但是由于我進不去官方,就看不到相關(guān)的代碼和效果,反正默認有點難看。

取值

我們可以通過以下方式進行取值,先綁定對應的函數(shù)

  <v-distpicker type="mobile" @province="onChangeProvince" @city="onChangeCity" @area="onChangeArea"></v-distpicker>

然后在data中聲明省市區(qū)這三個變量,用于接收下拉框省市區(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
      },

查看效果,可以在前端或者后端進行拼成成一個整體,這里就不做演示了

總結(jié)

使用起來確實很方便,但是官網(wǎng)進不去加上頁面不太適配,就不打算再使用它了,等到哪天優(yōu)化之后,再回來更新

到此這篇關(guān)于Vue使用distpicker插件實現(xiàn)省市級下拉框三級聯(lián)動的文章就介紹到這了,更多相關(guān)Vue省市級下拉框三級聯(lián)動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue使用better-scroll實現(xiàn)橫向滾動的方法實例

    vue使用better-scroll實現(xiàn)橫向滾動的方法實例

    這幾天研究項目時,看到了 better-scroll 插件,看著感覺功能挺強,這篇文章主要給大家介紹了關(guān)于vue使用better-scroll實現(xiàn)橫向滾動的相關(guān)資料,需要的朋友可以參考下
    2021-06-06
  • vue實現(xiàn)websocket客服聊天功能

    vue實現(xiàn)websocket客服聊天功能

    這篇文章主要為大家詳細介紹了vue實現(xiàn)websocket客服聊天功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • vue 使用class創(chuàng)建和清除水印的示例代碼

    vue 使用class創(chuàng)建和清除水印的示例代碼

    這篇文章主要介紹了vue 使用class創(chuàng)建和清除水印的示例代碼,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下
    2020-12-12
  • VUE中路由變化this.$router(push\replace\go\back)解讀

    VUE中路由變化this.$router(push\replace\go\back)解讀

    這篇文章主要介紹了VUE中路由變化this.$router(push\replace\go\back),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue中的baseurl如何配置

    Vue中的baseurl如何配置

    這篇文章主要介紹了Vue中的baseurl如何配置問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • vue 中 element-ui table合并上下兩行相同數(shù)據(jù)單元格

    vue 中 element-ui table合并上下兩行相同數(shù)據(jù)單元格

    這篇文章主要介紹了vue 中 element-ui table合并上下兩行相同數(shù)據(jù)單元格,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-12-12
  • vue3+vite中報錯信息處理方法Error: Module “path“ has been externalized for browser compatibility...

    vue3+vite中報錯信息處理方法Error: Module “path“ has&nb

    這篇文章主要介紹了vue3+vite中報錯信息處理方法Error: Module “path“ has been externalized for browser compatibility...,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-03-03
  • Vue實現(xiàn)瀏覽器端掃碼功能

    Vue實現(xiàn)瀏覽器端掃碼功能

    本文主要介紹,通過使用基于 vue技術(shù)棧的前端開發(fā)技術(shù),在瀏覽器端調(diào)起攝像頭,并進行掃碼識別功能,對識別到的二維碼進行跳轉(zhuǎn)或其他操作處理,對vue瀏覽器掃碼功能的實現(xiàn)代碼感興趣的朋友一起看看吧
    2021-10-10
  • Vue3結(jié)合TypeScript項目開發(fā)實踐總結(jié)

    Vue3結(jié)合TypeScript項目開發(fā)實踐總結(jié)

    本文主要介紹了Vue3結(jié)合TypeScript項目開發(fā)實踐總結(jié),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • Vue如何解決子組件data從props中無法動態(tài)更新數(shù)據(jù)問題

    Vue如何解決子組件data從props中無法動態(tài)更新數(shù)據(jù)問題

    這篇文章主要介紹了Vue如何解決子組件data從props中無法動態(tài)更新數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10

最新評論