我们曾经经常会遇到需要选择省市区的需求,我们可能是找一个插件来实现,但是有了vue之后,我们自己完全可以简单的实现这个效果,并封装为独立的.vue组件,便于日后使用
我们今天来实现一个 利用vuejs开发的 省市区三联动的组件 CitySelect.vue组件
首先来看一下最终的效果(没有写太多的样式...)
组件所需要的省市区的JSON数据(已经封装为commonjs模块了): provinces.js
这个数据中有这样几个字段:
code: 当前省市区的编码
sheng: 当前所在的省
name: 省市区的名字
level: 级别,省 level = 1, 市 level=2, 区/县城 level = 3
di: 县,市级别的区分
如何使用?
这里采用了 v-model暴露接口, 所以我们下拉选择的值,你只需要在 v-model绑定的属性中去拿即可
我们使用的字段是 cityInfo用于接收组件的数据, 组件为了返回足够的数据, 它是一个对象
使用代码示例 :
App.vue
<template> <div> <h5>vue 省市区三联动 demo</h5> <city-select v-model="cityInfo"></city-select> <h6>v-model的值是 <code>{{ cityInfo }}</code></h6> <h6>从v-model得知,你选择了 <i>{{ cityName }}</i></h6> </div> </template> <script> import CitySelect from './components/CitySelect.vue' export default { data() { return { cityInfo: '', } }, components: { CitySelect }, computed: { cityName() { const names = []; this.cityInfo.province && names.push(this.cityInfo.province.name + ' ') this.cityInfo.city && names.push(this.cityInfo.city.name + ' ') this.cityInfo.block && names.push(this.cityInfo.block.name + ' ') return names.join('') } } } </script> <style lang="stylus"> h6 padding 10px border 1px dotted h6 i color #f00 border 1px dotted #ccc </style>
cityName是我们需要展示的数据,作为一个计算属性而存在,因为这个值是不断变化的,从cityInfo中抽取出来的数据
下面我们来看一下组件的实现代码
CitySelect.vue
<template> <div> <select v-model="selectedProvince"> <option v-for="(item, index) in provinces" v-if="item.level === 1" :value="item"> {{ item.name }} </option> </select> <select v-model="selectedCity"> <option v-for="(item, index) in cities" :value="item"> {{ item.name }} </option> </select> <select v-model="selectedBlock"> <option v-for="(item, index) in blocks" :value="item"> {{ item.name }} </option> </select> </div> </template> <script> /** * 省 市 区/县城 三联动选择器 */ import provinces from './provinces.js' import Vue from 'vue' export default { name: 'app', created() { // 数据初始化,默认选中北京市,默认选中第一个;北京市数据为总数据的前18个 let beijing = this.provinces.slice(0, 19) this.cities = beijing.filter(item => { if (item.level === 2) { return true } }) this.selectedCity = this.cities[0] this.blocks = beijing.filter(item => { if (item.level === 3) { return true } }) this.selectedBlock = this.blocks[0] }, watch: { selectedProvince(newVal, oldVal) { // 港澳台数据只有一级,特殊处理 if (newVal.sheng === '71' || newVal.sheng === '81' || newVal.sheng === '82') { this.cities = [newVal] this.blocks = [newVal] } else { this.cities = this.provinces.filter(item => { if (item.level === 2 && item.sheng && newVal.sheng === item.sheng) { return true } }) } var _this = this // 此时在渲染DOM,渲染结束之后再选中第一个 Vue.nextTick(() => { _this.selectedCity = _this.cities[0] _this.$emit('input', _this.info) }) }, selectedBlock() { var _this = this Vue.nextTick(() => { _this.$emit('input', _this.info) }) }, selectedCity(newVal) { // 选择了一个市,要选择区了 di是城市的代表,sheng if (newVal.sheng === '71' || newVal.sheng === '81' || newVal.sheng === '82') { this.blocks = [newVal] this.cities = [newVal] } else { this.blocks = this.provinces.filter(item => { if (item.level === 3 && item.sheng && item.sheng == newVal.sheng && item.di === newVal.di && item.name !== '市辖区') { return true } }) } var _this = this Vue.nextTick(() => { _this.selectedBlock = _this.blocks[0] // 触发与 v-model相关的 input事件 _this.$emit('input', _this.info) }) } }, computed: { info() { return { province: this.selectedProvince, city: this.selectedCity, block: this.selectedBlock } } }, data() { return { selectedProvince: provinces[0], selectedCity: 0, selectedBlock: 0, cities: 0, provinces, blocks: 0 } } } </script> <style lang="stylus" scoped> .city-select select outline 0 </style>
组件关键点说明:
HTML模板采用三个 select下拉控件,分别具有v-model由于绑定选择的数据,使用v-for遍历省市区数据
data中的数据,分别是选中的省市区的值(对象形式); 以及当前这个省的城市,这个城市的区,见名知意
在create钩子函数中我们进行了数据的初始化,默认我们显示北京相关的信息,改变v-model对应的属性值
实现三联动的重点: