一个适用于PC端的地区选择器组件-Vue

简介

这是一个适用于PC端的地区选择组件，可以控制地区选择的范围，适用于Vue2.x项目中，引入和使用都十分简单。

引入

去到该项目Github下，将 areaPicker 整个文件夹下载下来并放到你的项目components目录下做为一个Vue组件，并在需要的页面中引入并注册为一个组件即可！
如：

import areaPicker from '@/components/areaPicker/index' // 文件对应路径

export default {
    components: {
        areaPicker
    },
}

areaPicker目录下的index.vue是组件的主要实现文件，areaData.js是地区数据文件，这两个文件必要有，且在同一目录下。

使用

使用方法很简单，绑定一个变量接收地址信息即可。
显示默认值，只需要给area赋值一个对应的地址数据即可，如 [‘110000’, ‘111000’, ‘111001’]

<area-picker v-model="area" />

data(){
    return {
        area: [],
    }
},

columns的值可以改变地区的选择范围，默认为3列，分别为 省/市/区县；设置为2时，显示 省/市

<area-picker
    v-model="area"
    :columns="2"
/>

data(){
    return {
        area: [],
    }
},

使用过程中会触发多种事件回调，具体可查看底部API；以下是实时显示地址名称的例子：

<p>地址：{{ areaName }}</p>
<area-picker
    ref="picker"
    v-model="area"
    @pick="handlePick"
/>

data(){
    return {
        area: [],
        areaName: '',
    }
},

methods: {
    handlePick(areaList){
        this.areaName = areaList.map((item) => item.name).join('');
    }
}

这是个单纯提供的选择地区功能的组件，通常我们可以根据业务需求组合起来使用；最常用的是包裹在一个弹窗中，组成一个弹出式的地区选择器；组件样式也可以直接进去源文件进行更改。

API

area-picker Attributes

参数	说明	类型	可选值	默认值
v-model	绑定值，地区的对应code	Array	-	-
columns	可选择的地区列数，分别为 省/市/区县	Number	[1-3]	3
width	选择器的宽度（默认单位为px）	[Number, String]	-	360
height	选择器的高度（单位为px）	Number	-	290

area-picker Events

事件名称	说明	回调参数
pick	当点击选择任意一个地址时触发	当前选择的地区数组，如：[{ code: 110000, name: ‘北京市’ }…]
pick-province	选择省级时触发	{ code: xxx, name: ‘选中的省’ }
pick-city	选择城市时触发	{ code: xxx, name: ‘选中的城市’ }
pick-county	选择区/县时触发	{ code: xxx, name: ‘选中的区/县’ }

area-picker Methods

方法名	说明	参数
getAreaNameList	获取当前地址code对应的中文名，返回一个数组	地址code数组，如：[‘110000’, ‘111000’, ‘111001’]

???? 项目地址