Skip to content

✨ A flexible, highly available district picker for picking provinces, cities and districts of China.

License

Notifications You must be signed in to change notification settings

jcc/v-distpicker

Repository files navigation

Powered By Jiajian Chan

A flexible, highly available district selector for picking provinces, cities and districts of China.

V - Distpicker

github-stars github-stars download-image

Documents and Demo

[English] | 简体中文

CHANGELOG

Installation

Vue 2

npm install v-distpicker@^1.3.3 --save

Vue 3

npm install v-distpicker@^2.1.0 --save

CDN

<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.