最近在項目里需要用到地區(qū)選擇器生巡，就找到 V - Distpicker 是一個簡單易用的地區(qū)選擇器。使用非常簡單厅缺，功能強大罢吃，推薦大家使用楚午。
官網(wǎng): https://distpicker.pigjian.com
github: https://github.com/jcc/v-distpicker
Installation
npm install v-distpicker --save
Or
yarn add v-distpicker --save
Register global component（注冊全局組件）
import VDistpicker from 'v-distpicker'
Vue.component('v-distpicker', VDistpicker)
Register component（注冊局部組件）
import VDistpicker from 'v-distpicker'
export default {
components: { VDistpicker }
}
示例：
示例.png
示例2.png
<template>
<v-distpicker
:province="province"
:city="city"
:area="area"
@selected="onSelected">
</v-distpicker>
<template>
<script>
import VDistpicker from 'v-distpicker'
export default {
components: { VDistpicker },
methods:{
onSelected(data) {
this.province = data.province.value;
this.city = data.city.value;
this.area = data.area.value;
this.ruleForm.province = this.province;
this.ruleForm.city = this.city;
this.ruleForm.area = this.area;
}
}
}
</script>
Attributes
| 參數(shù) | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| province | 省份（選填） | String | 省份名 | null |
| city | 城市（選填） | String | 城市名 | null |
| area | 地區(qū)（選填） | String | 地區(qū)名 | null |
| type | 類型（選填，默認 select） | String | mobile | null |
| disabled | 是否禁用（選填尿招，默認 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 |
Methods
| 方法 | 說明 | 參數(shù) |
|---|---|---|
| province | 選擇省份 | 返回省份的值 |
| city | 選擇城市 | 返回城市的值 |
| city | 選擇地區(qū) | 返回地區(qū)的值 |
| selected | 選擇最后一項時觸發(fā) | 返回省市區(qū)的值 |
