快捷導(dǎo)航

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

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

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

這是一個基于Vue2的簡易省市區(qū)縣三級聯(lián)動組件，可以控制只顯示省級或只顯示省市兩級，可設(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>

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

屬性配置

參數(shù)	說明	類型	可選值	默認(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' 時無效）	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' 時有效）	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

方法

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

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

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

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