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

King

这是一个基于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

计算机

2022年3月13日