快捷導(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ù)	說明	類型	可選值	默認(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í)無效）	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

方法

方法	說明	參數(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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: