A flexible, highly available district selector for picking provinces, cities and districts of China.
V - Distpicker
[English] | 简体中文
Installation
Vue 2
npm install v-distpicker@^1.3.3 --saveVue 3
npm install v-distpicker@^2.1.0 --saveCDN
<script src="https://cdn.jsdelivr.net/npm/v-distpicker@version/dist/v-distpicker.js"></script>
<!-- or -->
<script src="https://unpkg.com/v-distpicker@version/dist/v-distpicker.js"></script>Usage
Register component
Registe global component:
import VDistpicker from 'v-distpicker'
const app = createApp(App)
app.component('v-distpicker', VDistpicker)Use setup-api:
<script setup>import VDistpicker from 'v-distpicker'</script>Registe component:
import { defineComponent } from 'vue'
import VDistpicker from 'v-distpicker'
export default defineComponent({
components: { VDistpicker },
})How to use
Basic:
<v-distpicker></v-distpicker>Default Value:
<v-distpicker province="广东省" city="广州市" area="海珠区"></v-distpicker>Mobile:
<v-distpicker type="mobile"></v-distpicker>Demo:
<template>
<v-distpicker
:province="select.province"
:city="select.city"
:area="select.area"
@selected="onSelect"
@change="onChange"
@province="selectProvince"
@city="selectCity"
@area="selectArea"
></v-distpicker>
</template>
<script setup>
import VDistpicker from 'v-distpicker'
let select = reactive({ province: '', city: '', area: '' })
function onSelect(data) {
console.log(data)
}
function onChange(data) {
console.log(data)
}
function selectProvince({ code, value }) {
select.province = value
console.log({ code, value })
}
function selectCity({ code, value }) {
select.city = value
console.log({ code, value })
}
function selectArea({ code, value }) {
select.area = value
console.log({ code, value })
}
</script>Props
| Name | Type | Description | Default | Sample |
|---|---|---|---|---|
| province | String/Number | 省级编码或名称 | '广东省'/440000/'440000' | |
| city | String/Number | 市级编码或名称 | '广州市'/440100/'440100' | |
| area | String/Number | 区级编码或名称 | '海珠区'/440105/'440105' | |
| placeholder | Object | 默认显示的值 | {province:'省',city:'市',area:'区'} | |
| type | String | 区分 pc 和 mobile,默认 pc | ||
| only-province | Boolean | 只显示省级选择器 | false | |
| hide-area | Boolean | 隐藏区级 | false | |
| disabled | Boolean | 禁用 | false | |
| province-disabled | Boolean | 禁用省 | false | |
| city-disabled | Boolean | 禁用市 | false | |
| area-disabled | Boolean | 禁用区 | false | |
| province-source | Object | 省数据源 | examples/components/data | |
| city-source | Object | 市级数据源 | ||
| address-source | Object | 区级数据源 | ||
| wrapper | String | className | 'distpicker-address-wrapper' | |
| address-header | String | className(mobile) | 'address-header' | |
| address-container | String | className(mobile) | 'address-container' |
Event
| Name | Type | Description | Return |
|---|---|---|---|
| province | Function | 选择省时触发 | {code,value} |
| city | Function | 选择市时触发 | {code,value} |
| area | Function | 选择区时触发 | {code,value} |
| selected | Function | 选择最后一项时触发 | {province:{code,value},city:{code,value},area:{code,value} } |
| change-province | Function | 省级改变时触发 | {code,value} |
| change-city | Function | 市级改变时触发 | {code,value} |
| change-area | Function | 区级改变时触发 | {code,value} |
| change | Function | 省市区改变时触发 | {province:{code,value},city:{code,value},area:{code,value} } |
Contributors
Thanks
License
The plugin is open-sourced software licensed under the MIT license.