✨ 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
InstallationVue 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' |
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} } |
The plugin is open-sourced software licensed under the MIT license.
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。