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

学习笔记 2018/10/31 Vue

我们使用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

本文地址：https://www.stayed.cn/item/109

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请联系我

我的博客