vue 城市级联选择 distPicker

vue地区选择器（v-distPicker）

官方文档☞https://distpicker.pigjian.com/

安装

npm install v-distpicker --save

配置

main.js中

import VDistpicker from 'v-distpicker'
Vue.component('v-distpicker', VDistpicker)

引入

import VDistpicker from 'v-distpicker'
export default {
  components: { VDistpicker },
}

使用

<v-distpicker></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	true, false	false
province-disabled	是否禁用省（选填，默认 false，且 type=‘mobile’ 时无效）	Boolean	true, false	false
city-disabled	是否禁用省（选填，默认 false，且 type=‘mobile’ 时无效）	Boolean	true, false	false
area-disabled	是否禁用区、县（选填，默认 false，且 type=‘mobile’ 时无效）	Boolean	true, false	false
hide-area	隐藏地区（选填）	Boolean	true, false	false
onlu-province	只显示省份（选填）	Boolean	true, false	false
static-placeholder	是否将占位符显示为已经选择的项（仅 type=‘mobile’ 时有效）	Boolean	true, false	false
placeholders	占位符（选填）	Object	province, city, area	{ province: ‘省’, city: ‘市’, area: ‘区’ }
wrapper	外层 Class（选填）	String	customize	address
address-header	address-header 样式（选填，类型必须为 mobile）	String	customize	address-header
address-container	address-container 样式（选填，类型必须为 mobile）	String	customize	address-contaniner

事件

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