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

Event

Contributors

Thanks

• Distpicker

License

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