✨ A flexible, highly available

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

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 Distpicker License

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

版权声明:

1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。
2、网站不提供资料下载,如需下载请到原作者页面进行下载。