v-distpicker|一个基于Vue的地区选择器插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

v-distpicker是一个基于Vue的地区选择器插件，可以用来选择中国的省市区。它有以下几个特点：

灵活：你可以自定义数据源、样式、事件等。
高可用：它使用了国家统计局的数据，保证了数据的准确性和完整性。
兼容：它支持PC端和移动端，适应不同的设备和场景。
简单：你只需要安装插件并引入组件，就可以使用它。

使用方法

安装

你可以使用npm来安装插件，命令如下：

// Vue 3 安装2.x 版本			
npm install v-distpicker@^2.1.0 --save
// Vue 2 安装1.x 版本
npm install v-distpicker@^1.3.3 --save

使用

全局注册

import VDistpicker from 'v-distpicker'

Vue.component('v-distpicker', VDistpicker

局部注册

import VDistpicker from 'v-distpicker'

export default {
  components: { VDistpicker }
}

配置参数

v-distpicker插件有以下几个配置参数

参数	说明	类型	可选值	默认值
province	省份（选填）	String	省份名	null
city	城市（选填）	String	城市名	null
area	地区（选填）	String	地区名	null
type	类型（选填，默认 select）	String	mobile	null
disabled	是否禁用（选填，默认 false，且 type='mobile' 时无效，当disabled=true时province-disabled、city-disabled、area-disabled均无效）	Boolean		false
province-disabled	是否禁用省（选填，默认 false，且 type='mobile' 时无效）	Boolean		false
city-disabled	是否禁用市（选填，默认 false，且 type='mobile' 时无效）	Boolean		false
area-disabled	是否禁用区、县（选填，默认 false，且 type='mobile' 时无效）	Boolean		false
hide-area	隐藏地区（选填）	Boolean		false
only-province	只显示省份（选填）	Boolean		false
static-placeholder	是否将占位符显示为已经选择的项（仅 type='mobile' 时有效）	Boolean		false
placeholders	占位符（选填）	Object	province, city, area	{ province: '省', city: '市', area: '区' }
wrapper	外层 Class（选填）	String	customize	address
province-source	自定义省级数据	Object
city-source	自定义市级数据	Object
area-source	自定义区级数据	Object
address-header	address-header 样式（选填，类型必须为 mobile）	String	customize	address-header
address-container	address-container 样式（选填，类型必须为 mobile）	String	customize	address-contaniner

方法

v-distpicker插件的可用方法有：

方法	说明	参数
province	选择省份	返回省份的值
city	选择城市	返回城市的值
area	选择地区	返回地区的值
selected	选择最后一项时触发	返回省市区的值
change-province	改变时触发	返回省市区的值
change-city	改变时触发	返回省市区的值
change-area	改变时触发	返回省市区的值
change	改变最后一项时触发	返回省市区的值