快捷導(dǎo)航

基于Vue2實現(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)選擇的項（僅 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

方法