xl-mobile/src/components/XDropdownList.vue

<script setup>
import {ref} from "vue";
import XDropdownItem from "./XDropdownItem.vue";

const show = ref(false);
const modelValue = defineModel();
const emits = defineEmits(['change']);
const {option} = defineProps({
    option: {
        type: Array,
        default: [],
    }
});

const change = (id) => {
    modelValue.value = id;
    emits('change');
    show.value = false;
}
</script>

<template>
    <view class="relative z-[9990]">
        <view @click="show=!show">
            <view class="bg-[#fff] !py-[14rpx] !px-[24rpx] rounded-[8rpx]">
                {{ option.find(v => v.id === modelValue)?.name }}
            </view>

            <tui-icon
                :style="{
                    transform: !show ? 'rotate(0deg)' : 'rotate(180deg)'
                }"
                class="absolute top-1/2 -translate-y-1/2 right-[20rpx] duration-300"
                name="arrowdown"
                :size="20">
            </tui-icon>
        </view>

        <transition name="fade">
            <view v-if="show"
                  class="absolute top-[calc(100%+10rpx)] min-w-full bg-[#fff] rounded-[8rpx] x-dropdown-card">
                <x-dropdown-item v-for="v in option" @click="change(v.id)" :active="modelValue===v.id">
                    {{ v.name }}
                </x-dropdown-item>
            </view>
        </transition>
    </view>

    <view
        v-if="show"
        id="mask"
        @click="show=false"
        class="!w-screen !h-screen !fixed left-0 top-0 z-[999]">
    </view>
</template>

<style lang="scss" scoped>
.x-dropdown-card {
    box-shadow: 0px 2px 20px 5px rgba(0, 0, 0, 0.2);
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 300ms;
    position: absolute;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
    position: absolute;
}
</style>