vue3 封装选择城市组件

在使用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