这是一个基于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 省份名 nullcity 城市（选填） String 城市名 nullarea 地区（选填） String 地区名 nulltype 类型（选填，默认 select） String mobile nulldisabled 是否禁用（选填，默认 false，且 type='mobile' 时无效） Boolean true, false falsehide-area 隐藏地区（选填） Boolean true, false falseonlu-province 只显示省份（选填） Boolean true, false falsestatic-placeholder 是否将占位符显示为已经选择的项（仅 type='mobile' 时有效） Boolean true, false falseplaceholders 占位符（选填） Object province, city, area { province: '省', city: '市', area: '区' }wrapper 外层 Class（选填） String customize addressaddress-header address-header 样式（选填，类型必须为 mobile） String customize address-headeraddress-container address-container 样式（选填，类型必须为 mobile） String customize address-contaniner
方法
province 选择省份 返回省份的值 city 选择城市 返回城市的值 area 选择地区 返回地区的值 selected 选择最后一项时触发 返回省市区的值
项目地址：https://github.com/jcc/v-distpicker
以上就上有关基于Vue2的简易的省市区县三级联动组件的全部内容，学步园全面介绍编程技术、操作系统、数据库、web前端技术等内容。