基于Vue2實現簡易的省市區縣三級聯動組件效果

來源：懂視網責編：小采時間：2020-11-27 22:04:28

基于Vue2實現簡易的省市區縣三級聯動組件效果

基于Vue2實現簡易的省市區縣三級聯動組件效果:這是一個基于Vue2的簡易省市區縣三級聯動組件，可以控制只顯示省級或只顯示省市兩級，可設置默認值等。提供原始省市縣代碼和名稱數據，適用于各種有關城市區縣的應用。安裝我們使用npm安裝： npm install v-distpicker --save 使用首先在模板中加

推薦度：

點擊下載本文 文檔為doc格式

導讀基于Vue2實現簡易的省市區縣三級聯動組件效果:這是一個基于Vue2的簡易省市區縣三級聯動組件，可以控制只顯示省級或只顯示省市兩級，可設置默認值等。提供原始省市縣代碼和名稱數據，適用于各種有關城市區縣的應用。安裝我們使用npm安裝： npm install v-distpicker --save 使用首先在模板中加

這是一個基于Vue2的簡易省市區縣三級聯動組件，可以控制只顯示省級或只顯示省市兩級，可設置默認值等。提供原始省市縣代碼和名稱數據，適用于各種有關城市區縣的應用。

安裝

我們使用npm安裝：

npm install v-distpicker --save

使用

首先在模板中加入組件：

<v-distpicker></v-distpicker>

如果要帶默認值，則可以這樣：

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

然后在js部分調用組件：

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

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

屬性配置

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

方法

方法	說明	參數
province	選擇省份	返回省份的值
city	選擇城市	返回城市的值
area	選擇地區	返回地區的值
selected	選擇最后一項時觸發	返回省市區的值