快捷導(dǎo)航

基于Vue2實(shí)現(xiàn)簡(jiǎn)易的省市區(qū)縣三級(jí)聯(lián)動(dòng)組件效果

更新時(shí)間：2018年11月05日 09:02:59 作者：月光光

這是一個(gè)基于Vue2的簡(jiǎn)易省市區(qū)縣三級(jí)聯(lián)動(dòng)組件，可以控制只顯示省級(jí)或只顯示省市兩級(jí)，可設(shè)置默認(rèn)值等。提供原始省市縣代碼和名稱數(shù)據(jù)，適用于各種有關(guān)城市區(qū)縣的應(yīng)用。需要的朋友可以參考下

這是一個(gè)基于Vue2的簡(jiǎn)易省市區(qū)縣三級(jí)聯(lián)動(dòng)組件，可以控制只顯示省級(jí)或只顯示省市兩級(jí)，可設(shè)置默認(rèn)值等。提供原始省市縣代碼和名稱數(shù)據(jù)，適用于各種有關(guān)城市區(qū)縣的應(yīng)用。

安裝

我們使用npm安裝：

npm install v-distpicker --save

使用

首先在模板中加入組件：

<v-distpicker></v-distpicker>

如果要帶默認(rèn)值，則可以這樣：

<v-distpicker province="廣東省" city="廣州市" area="海珠區(qū)"></v-distpicker>

然后在js部分調(diào)用組件：

<script>
import VDistpicker from 'v-distpicker'
export default {
 name: 'App',
 components: {
  VDistpicker
 }
}
</script>

這樣就可以了，如果要使用更多屬性配置和方法請(qǐng)參照以下兩個(gè)表格。

屬性配置

參數(shù)	說(shuō)明	類型	可選值	默認(rèn)值
province	省份（選填）	String	省份名	null
city	城市（選填）	String	城市名	null
area	地區(qū)（選填）	String	地區(qū)名	null
type	類型（選填，默認(rèn) select）	String	mobile	null
disabled	是否禁用（選填，默認(rèn) false，且 type='mobile' 時(shí)無(wú)效）	Boolean	true, false	false
hide-area	隱藏地區(qū)（選填）	Boolean	true, false	false
onlu-province	只顯示省份（選填）	Boolean	true, false	false
static-placeholder	是否將占位符顯示為已經(jīng)選擇的項(xiàng)（僅 type='mobile' 時(shí)有效）	Boolean	true, false	false
placeholders	占位符（選填）	Object	province, city, area	{ province: '省', city: '市', area: '區(qū)' }
wrapper	外層 Class（選填）	String	customize	address
address-header	address-header 樣式（選填，類型必須為 mobile）	String	customize	address-header
address-container	address-container 樣式（選填，類型必須為 mobile）	String	customize	address-contaniner

方法

方法	說(shuō)明	參數(shù)
province	選擇省份	返回省份的值
city	選擇城市	返回城市的值
area	選擇地區(qū)	返回地區(qū)的值
selected	選擇最后一項(xiàng)時(shí)觸發(fā)	返回省市區(qū)的值

項(xiàng)目地址：https://github.com/jcc/v-distpicker

總結(jié)

以上所述是小編給大家介紹的基于Vue2實(shí)現(xiàn)簡(jiǎn)易的省市區(qū)縣三級(jí)聯(lián)動(dòng)組件效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Vue中的v-model，v-bind，v-on的區(qū)別解析
vue.js是一套構(gòu)建用戶界面的框架，只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合，vue.js有配套的第三方類庫(kù)，可以整合起來(lái)做大型項(xiàng)目的開(kāi)發(fā)，這篇文章主要介紹了v-model，v-bind，v-on的區(qū)別,需要的朋友可以參考下
2022-12-12
詳解三種方式解決vue中v-html元素中標(biāo)簽樣式
這篇文章主要介紹了三種方式解決vue中v-html元素中標(biāo)簽樣式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-11-11
手把手教你Vue-cli項(xiàng)目的搭建
這篇文章主要為大家詳細(xì)介紹了Vue-cli項(xiàng)目的搭建方法，文中圖片介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-02-02
解讀Vue組件注冊(cè)方式
無(wú)論是Vue還是React，都有組件的概念。組件，就是能和別人組合在一起的物件。在前端頁(yè)面開(kāi)發(fā)過(guò)程中，將一個(gè)頁(yè)面劃分成一個(gè)個(gè)小的模塊，每個(gè)模塊單獨(dú)定義，每個(gè)模塊就是一個(gè)組件。組件可以進(jìn)行復(fù)用，A頁(yè)面和B頁(yè)面有一個(gè)相似的模塊，可以抽離成一個(gè)可局部修改的組件。
2021-05-05
vue3實(shí)現(xiàn)動(dòng)態(tài)添加路由
這篇文章主要介紹了vue3實(shí)現(xiàn)動(dòng)態(tài)添加路由方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
Vue3之 Vue CLI多環(huán)境配置
這篇文章主要介紹了Vue3之 Vue CLI多環(huán)境配置，通俗點(diǎn)說(shuō)就是使用配置文件來(lái)管理多環(huán)境，實(shí)現(xiàn)環(huán)境的切換，西阿棉詳細(xì)內(nèi)容,需要的朋友可以參考一下
2021-11-11
Vue必學(xué)知識(shí)點(diǎn)之forEach()的使用
在前端開(kāi)發(fā)中，經(jīng)常會(huì)遇到一些通過(guò)遍歷循環(huán)來(lái)獲取想要的內(nèi)容的情形，這時(shí)候就需要用到forEach()了，下面這篇文章主要給大家介紹了關(guān)于Vue必學(xué)知識(shí)點(diǎn)之forEach()使用的相關(guān)資料，需要的朋友可以參考下
2021-05-05
詳解vue+vueRouter+webpack的簡(jiǎn)單實(shí)例
這篇文章主要介紹了詳解vue+vueRouter+webpack的簡(jiǎn)單實(shí)例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-06-06
使用Vue-cli3.0創(chuàng)建的項(xiàng)目如何發(fā)布npm包
這篇文章主要介紹了使用Vue-cli3.0創(chuàng)建的項(xiàng)目，如何發(fā)布npm包,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-10-10
vue中生成條形碼(jsbarcode)和二維碼(qrcodejs2)的簡(jiǎn)單示例
在vue項(xiàng)目中難免遇到有要生成條形碼或者二維碼的功能需求,下面這篇文章主要給大家介紹了關(guān)于vue中生成條形碼(jsbarcode)和二維碼(qrcodejs2)的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12