dz-app/components/mx-condition-dropdown/mx-condition-dropdown.vue

<template>
    <scroll-view :scroll-x="x" :style="{zIndex: z}">
        <view class="bg-white h-[44px] text-xs text-main px-30" :class="layout">
            <mx-condition-dropdown-item v-for="c in conditions" :condition="c" :use-value-as-title="useValueAsTitle"/>
        </view>
    </scroll-view>
    <mx-condition-dropdown-popup ref="popup"/>
    <uv-line ref="bottom" :style="{zIndex: z}"/>
</template>

<script setup>
/*TODO：暂不要给mx-condition-dropdown套uv-form,会导致zIndex失效，待改善*/
import {ref, getCurrentInstance, onMounted} from 'vue';
import {createPropDefine} from "@/utils";
import {useInjectSearchModel} from "@/components/mx-condition/useSearchModelInjection";
import MxConditionDropdownItem from "@/components/mx-condition-dropdown/mx-condition-dropdown-item.vue";
import MxConditionDropdownPopup from "@/components/mx-condition-dropdown/mx-condition-dropdown-popup.vue";
import {useProvideConditionDropdownPopup} from "@/components/mx-condition-dropdown/useConditionDropdownPopupInjection";
import {findAncestorComponentByName} from "@/utils/uni-helper";

const props = defineProps({
    border: createPropDefine(false, Boolean),
    layout: createPropDefine('fx-row fx-bet-cen'),
    useValueAsTitle: createPropDefine(false, Boolean),
    x: createPropDefine(false, Boolean),
    z: createPropDefine(20000, Number) // 防止被弹层遮挡
})

const bottom = ref(null) // 最底部的元素，用于定位弹层
const popup = ref(null) // 弹层元素，将贴合bottom往下弹出
// relative容器元素，确定弹出层的相对位置 // TODO:理论上这里应该使用外部的swiper
const container = ref(null)
const {conditions} = useInjectSearchModel()
useProvideConditionDropdownPopup(popup, bottom, container)

onMounted(() => {
    const instance = getCurrentInstance()
    const swiper = findAncestorComponentByName(instance, 'Swiper')
    container.value = swiper || document.getElementById('app')
})

defineExpose({terminate: () => popup.value.close(), getShow: () => popup.value.show})
</script>

<style scoped>

</style>