v-distpicker|一个基于Vue的地区选择器插件


源码介绍

简要教程

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)Stringmobilenull
disabled是否禁用(选填,默认 false,且 type='mobile' 时无效,当disabled=true时province-disabled、city-disabled、area-disabled均无效)Booleanfalse
province-disabled是否禁用省(选填,默认 false,且 type='mobile' 时无效)Booleanfalse
city-disabled是否禁用市(选填,默认 false,且 type='mobile' 时无效)Booleanfalse
area-disabled是否禁用区、县(选填,默认 false,且 type='mobile' 时无效)Booleanfalse
hide-area隐藏地区(选填)Booleanfalse
only-province只显示省份(选填)Booleanfalse
static-placeholder是否将占位符显示为已经选择的项(仅 type='mobile' 时有效)Booleanfalse
placeholders占位符(选填)Objectprovince, city, area{ province: '省', city: '市', area: '区' }
wrapper外层 Class(选填)Stringcustomizeaddress
province-source自定义省级数据Object
city-source自定义市级数据Object
area-source自定义区级数据Object
address-headeraddress-header 样式(选填,类型必须为 mobile)Stringcustomizeaddress-header
address-containeraddress-container 样式(选填,类型必须为 mobile)Stringcustomizeaddress-contaniner

方法

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

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

github网址:https://github.com/jcc/v-distpicker



点赞(0) 打赏

立即下载

点击下载

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部