基于Vue2实现简易的省市区县三级联动组件效果

这篇文章主要为大家详细介绍了基于Vue2实现简易的省市区县三级联动组件效果，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

这是一个基于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实现简易的省市区县三级联动组件效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对四海网网站的支持！

本文来自：http://www.q1010.com/184/6621-0.html

注：关于基于Vue2实现简易的省市区县三级联动组件效果的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js