这是一个基于Vue2的简易省市区县三级联动组件，可以控制只显示省级或只显示省市两级，可设置默认值等。提供原始省市县代码和名称数据，适用于各种有关城市区县的应用。
安装
我们使用npm安装：
npm install v-distpicker --save
使用
首先在模板中加入组件：
<v-distpicker></v-distpicker>
如果要带默认值，则可以这样：
<v-distpicker province="广东省" city="广州市" area="海珠区"></v-distpicker>
然后在js部分调用组件：
<script>
import VDistpicker from 'v-distpicker'
export default {
name: 'App',
components: {
VDistpicker
}
}
</script>
这样就可以了，如果要使用更多属性配置和方法请参照以下两个表格。
属性配置
参数
说明
类型
可选值
默认值
province
省份（选填）
String
省份名
null
city
城市（选填）
String
城市名
null
area
地区（选填）
String
地区名
null
type
类型（选填，默认 select）
String
mobile
null
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
选择最后一项时触发
返回省市区的值
项目地址：https://github.com/jcc/v-distpicker
总结
以上所述是小编给大家介绍的基于Vue2实现简易的省市区县三级联动组件效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！