我们曾经经常会遇到需要选择省市区的需求,我们可能是找一个插件来实现,但是有了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 id="app">
<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 class="city-select">
<select v-model="selectedProvince" name="province">
<option v-for="(item, index) in provinces"
v-if="item.level === 1"
:value="item">
{{ item.name }}
</option>
</select>
<select v-model="selectedCity" name="city">
<option
v-for="(item, index) in cities"
