vue3 手动封装城市三级联动

要做的功能 示意图是这样的，因为后端给的数据结构 不足以使用ant-design组件 的联动查询组件

所以只能自己分装 组件

当然 这个数据后端给的不一样的情况下 可能组件内对应的 逻辑方式就不一样

毕竟是 三个 数组 省份 城市 区域

我直接粘贴组件代码了

<template><div class="cascader-compoents-container"><div class="city-select" @click.stop="toggleCascader"><a-inputv-model:value="cascaderName":style="{ width: width + 'px', 'text-align': 'left' }"placeholder="选择城市"/><DownOutlinedstyle="font-size: 12px;color: rgba(0, 0, 0, 0.25);position: absolute;right: 11px;top: 10px;"/></div><div class="city-select-content" v-if="cascaderShow" v-click-outside="handleClose"><div class="province" :style="{ width: width / 2 + 'px' }" v-if="province.length > 0"><div class="item" v-for="item in province" :key="item.value" @click="onSelected(item, 0)"><div>{{ item.label }}</div><RightOutlined style="font-size: 12px; color: rgba(0, 0, 0, 0.25)" /></div></div><div class="city" :style="{ width: width / 2 + 'px' }" v-if="city.length > 0"><div class="item" v-for="item in city" :key="item.value" @click="onSelected(item, 1)"><div>{{ item.label }}</div><RightOutlined style="font-size: 12px; color: rgba(0, 0, 0, 0.25)" /></div></div><div class="district" :style="{ width: width / 2 + 'px' }" v-if="district.length > 0"><div class="item" v-for="item in district" :key="item.value" @click="onSelected(item, 2)"><div>{{ item.label }}</div></div></div></div></div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, toRefs, watch } from 'vue'
import * as addressApi from '@/api/address'const props = defineProps({width: {type: [Number, String],default: 300,},placeholder: {type: String,default: '选择城市',},modelValue: {type: Array,default: () => [],},
})
const { width, modelValue, placeholder } = toRefs(props)
const cascaderName = ref('')
const values = ref([])
const selectedId = ref([...modelValue.value])
const province = ref([])
const city = ref([])
const district = ref([])
const cascaderShow = ref(false)
const emits = defineEmits(['update:modelValue', 'onSelected'])
const updateCascaderName = () => {cascaderName.value = selectedId.value.map(item => item.label).join(' / ') || ''
}
// 监听 modelValue 变化以实现回显
watch(modelValue,async newVal => {selectedId.value = [...newVal]updateCascaderName()},{ immediate: true },
)const vClickOutside = {mounted(el: HTMLElement, binding: any) {el.clickOutsideEvent = (e: Event) => {if (!(el === e.target || el.contains(e.target as Node))) {binding.value(e)}}document.body.addEventListener('click', el.clickOutsideEvent)},unmounted(el: HTMLElement) {document.body.removeEventListener('click', el.clickOutsideEvent)},
}const toggleCascader = () => {cascaderShow.value = !cascaderShow.value
}const handleClose = () => {cascaderShow.value = false
}
// 添加点击外部关闭逻辑
const handleClickOutside = (e: MouseEvent) => {//   const container = document.querySelector(`.cascader-compoents-container`)if (!e.currentTarget?.contains(e.target as Node)) {cascaderShow.value = false}
}
const getCityData = async (parentId: any, index: any) => {try {let { state, data, message: msg } = await addressApi.getChannelAreaList({ parentId })if (state === 200) {if (index == 0) {province.value = data.map((item: any) => {return {value: item.id,label: item.name,//   children: [],}})district.value = []} else if (index == 1) {city.value = data.map((item: any) => {return {value: item.id,label: item.name,}})} else if (index == 2) {district.value = data.map((item: any) => {return {value: item.id,label: item.name,}})}}} catch (error) {message.error('网络请求连接失败~')}
}
const onSelected = (item, index) => {console.log(item, index, 'item, index')if (index == 0) {city.value = []district.value = []selectedId.value[0] = item}if (index == 1) {selectedId.value[1] = item}if (index == 2) {selectedId.value[2] = itemcascaderShow.value = false}cascaderName.value = selectedId.value.map(item => item.label).join(' / ')emits('onSelected', selectedId.value)emits('update:modelValue', [...selectedId.value])getCityData(item.value, index + 1)
}
onMounted(() => {document.addEventListener('click', handleClickOutside)getCityData(0, 0)
})
onBeforeUnmount(() => {document.removeEventListener('click', handleClickOutside)
})
</script>
<style lang="less" scoped>
.cascader-compoents-container {position: relative;.city-select {position: relative;}.city-select-content {position: absolute;display: flex;justify-content: space-around;left: 5px;top: 40px;z-index: 99;.province,.city,.district {background-color: #fff;height: 200px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);overflow-y: auto;border-radius: 5px;padding: 5px 0;transition: all, 0.3s;.item {display: flex;font-size: 13px;justify-content: space-between;align-items: center;padding: 0 10px;height: 35px;line-height: 30px;cursor: pointer;transition: all, 0.3s;&:hover {background-color: #f0f0f0;}}}.city,.district {margin-left: 10px;}}
}
</style>

父组件中使用

            <CascaderCom @onSelected="getPcd1" v-model="selectedPcd2"></CascaderCom>@getPcd1 获取选择的省份城市 区域的 结果 自定义函数selectedPcd2  v-model 绑定的值 [] 有三个对象 分别对应 省 市 县  [{value:,label:},{value:,label:},{value:,label:}]在vue中  v-model  本来就是 modelValue   的语法糖
这里组件内用到了 监听 modelValue 的 时间 修改 组件内的 选择的数组这样能够解决 回显问题 因为 如果没有这个v-model 的 使用 父组件传递的回显数组 将不能够很快捷的在子组件中处理 

这是我对于 项目业务逻辑中的相关的使用来进行的封装组件 此项目多处使用了 类似样式  而且接口都一样 所以我把接口也放到了组件里 这样能够随机能用 当然 这个接口 原则上不太适合在组件中使用

所以我展现组件的目的

1.自己能够随时使用

2.其他技术人可以参考我的逻辑

3.可以给其他前端人 带来逻辑 学习

4.本人不才 望指教