Package Exports

v-distpicker
v-distpicker/dist/v-distpicker.esm.js
v-distpicker/dist/v-distpicker.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (v-distpicker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

V - Distpicker

github-stars download-image

Documents and Demo

[English] | 简体中文

CHANGELOG

Installation

npm install v-distpicker@^1.3.3 --save

npm install v-distpicker@^2.1.0 --save

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}
select	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

_jcc	_lyh2668	_wwhwwhwwh	_kent666a	_Milogenius
_xu8117	_tcsiye	_iyangsheng	_liushuai05	_Aufree

Thanks

Distpicker

License

The plugin is open-sourced software licensed under the MIT license.