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

V - Distpicker

Documents and Demo

[English] | 简体中文

CHANGELOG

Installation

Vue 2

npm install v-distpicker@^1.3.1 --save

Vue 3

npm install v-distpicker --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

Event

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.