在使用vue开发过程中,我们把页面之间或者页面内公共的部分单独抽离出来,封装成组件。这样方便代码的复用,以及后期维护。
在很多项目中我们经常使用到省、市、区的城市选择,我们可以封装这样一个组件。
ts部分:
<script setup lang="ts">
import { AreaList, CityResult } from '@/types/data';
import request from '@/utils/request';
import { onClickOutside } from '@vueuse/core';
import { onMounted, ref } from 'vue';
const emit = defineEmits<{
(e: 'changeCity', value: CityResult): void
}>()
// 创建一个变量,获取元素
const target = ref(null)
// 点击选择框外关闭选择框
onClickOutside(target, () => {
// 关闭选择框
isShow.value = false
// 重新将省份数据保存到 cityList 中
cityList.value = areaList.value
})
// 储存城市信息
const areaList = ref<AreaList[]>([])
// 发送请求,获取城市信息
onMounted(async () => {
const res = await request.get<AreaList[]>('https://www.xxxxx.com')
cityList.value = res.d