本文将带你实现地址的选择，将其注册为全局组件，进行三级联动后选定地址。
一、准备
1. axios
利用axios发送请求，拿到全部城市数据
- 在项目根目录下打开任意终端，执行
npm i axios命令 - 项目中需要发送请求的代码统一放置在
src/api目录下，这个目录下新建index.js文件
import axios from 'axios'
// 获取城市数据
// 1. 数据在哪里？https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json
// 2. 何时获取？打开城市列表的时候，做个内存中缓存
// 3. 怎么使用数据？定义计算属性，根据点击的省份城市展示
export const getCityList = async () => {
// 添加缓存，防止频繁加载列表数据
if (window.cityList) {
// 缓存中已经存在数据了
return window.cityList
}
const ret = await axios.get('https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json')
// 给window对象添加了一个属性cityList
if (ret.data) {
window.cityList = ret.data
}
// 把数据返回
return ret.data
}
2. vueuse/core
利用vueuse/core里的onClickOutside，判断是否点击的是组件外部，来帮助我们关闭弹层
终端中执行npm install @vueuse/core@5.3.0,这里安装指定版本的，各位按需选择
二、代码实现
1. 封装
将其封装为全局组件，还是像之前的文章一样，文件放在src/components目录下，新建city.vue文件
代码如下（示例）：
<template>
<div class="city" ref="target">
<div class="select" @click="toggle" :class="{active:isShow}">
<span v-if='!fullLocation' class="placeholder">请选择配送地址</span>
<span v-else class="value">{{fullLocation}}</span>
<i class="iconfont icon-angle-down"></i>
</div>
<!-- 下拉弹层 -->
<div class="option" v-show='isShow'>
<!-- 数据的加载过程进行提示 -->
<div class="loading" v-if='loading'></div>
<template v-else>
<span @click='changeCity(item)' class="ellipsis" v-for="item in cityList" :key="item.code">{{item.name}}</span>
</template>
</div>
</div>
</template>
<script>
import { ref, reactive, computed } from 'vue'
import { onClickOutside } from '@vueuse/core'
import { getCityList } from '@/api'
export default {
name: 'City',
props: {
fullLocation: {
type: String,
default: ''
}
},
setup (props, { emit }) {
const isShow = ref(false)
const loading = ref(false)
// 城市列表原始数据
const list = ref([])
// 选中的省市区
const changeResult = reactive({
provinceCode: '',
provinceName: '',
cityCode: '',
cityName: '',
countyCode: '',
countyName: '',
fullLocation: ''
})
// 选择城市操作
const changeCity = (city) => {
if (city.level === 0) {
// 点击的省级单位
changeResult.provinceCode = city.code
changeResult.provinceName = city.name
} else if (city.level === 1) {
// 点击的市级单位
changeResult.cityCode = city.code
changeResult.cityName = city.name
} else if (city.level === 2) {
// 点击的县级单位:选中最终的省市区数据，并且传递给父组件
changeResult.countyCode = city.code
changeResult.countyName = city.name
// 组合完整的省市区名称
changeResult.fullLocation = `${changeResult.provinceName}${changeResult.cityName}${changeResult.countyName}`
// 关闭碳层
isShow.value = false
// 把选中的数据最终传递给父组件
emit('change-city', changeResult)
}
}
// 通过计算属性计算当前显示的列表数据：省级；市级；县级
const cityList = computed(() => {
let result = list.value
// 当前点击的是省，那么就计算市级列表
if (changeResult.provinceCode && changeResult.provinceName) {
result = result.find(item => item.code === changeResult.provinceCode).areaList
}
if (changeResult.cityCode && changeResult.cityName) {
result = result.find(item => item.code === changeResult.cityCode).areaList
}
// 当前点击的是市，那么就计算县级列表
return result
})
// 点击显示和隐藏弹层
const toggle = () => {
isShow.value = !isShow.value
if (isShow.value) {
loading.value = true
// 调用接口之前，把之前选中的数据置空
for (const key in changeResult) {
changeResult[key] = ''
}
// 弹层显示了，调用接口
getCityList().then(ret => {
list.value = ret
loading.value = false
})
}
}
// 控制点击区域外，隐藏弹层
const target = ref(null)
onClickOutside(target, () => {
isShow.value = false
})
return { isShow, toggle, target, cityList, loading, changeCity }
}
}
</script>
<style scoped lang="less">
.city {
display: inline-block;
position: relative;
z-index: 400;
.select {
border: 1px solid #e4e4e4;
height: 30px;
padding: 0 5px;
line-height: 28px;
cursor: pointer;
&.active {
background: #fff;
}
.placeholder {
color: #999;
}
.value {
color: #666;
font-size: 12px;
}
i {
font-size: 12px;
margin-left: 5px;
}
}
.option {
width: 542px;
border: 1px solid #e4e4e4;
position: absolute;
left: 0;
top: 29px;
background: #fff;
min-height: 30px;
line-height: 30px;
display: flex;
flex-wrap: wrap;
padding: 10px;
.loading {
height: 290px;
width: 100%;
background: url(https://code-1307161657.cos.ap-beijing.myqcloud.com/images%2Fload.gif) no-repeat center;
}
> span {
width: 130px;
text-align: center;
cursor: pointer;
border-radius: 4px;
padding: 0 3px;
&:hover {
background: #f5f5f5;
}
}
}
}
</style>
在src/components目录下的index.js中注册为全局组件,在main.js中注册为插件
2. 使用
在任意.vue结尾的文件中使用
如果有默认数据的话，可以将默认数据传给子组件 代码如下（示例）：
<template>
<div class="home-banner">
<city @change-city='changeCity' :fullLocation='fullLocation' />
</div>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'App',
props: {
goods: {
type: Object,
default: () => { }
}
},
setup () {
const provinceCode = ref('110000')
const cityCode = ref('119900')
const countyCode = ref('110101')
// const fullLocation = ref('北京市 市辖区 东城区')
const fullLocation = ref('')
// 更新选中的省市区数据
const changeCity = (cityInfo) => {
provinceCode.value = cityInfo.provinceCode
cityCode.value = cityInfo.cityCode
countyCode.value = cityInfo.countyCode
fullLocation.value = cityInfo.fullLocation
}
return { fullLocation, changeCity }
}
}
</script>
<style lang="less">
.home-banner {
width: 1000px;
margin: 50px auto;
}
</style>
