這是一個基于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 | 選擇最后一項時觸發 | 返回省市區的值 |
項目地址：https://github.com/jcc/v-distpicker
總結
以上所述是小編給大家介紹的基于Vue2實現簡易的省市區縣三級聯動組件效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
