基于Vue2的简易的省市区县三级联动组件
栏目: JavaScript · 发布时间: 6年前
内容简介:这是一个基于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 | 选择最后一项时触发 | 返回省市区的值 |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。