vue 城市级联选择 distPicker
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 | 选择最后一项时触发 | 返回省市区的值 |