update

src/components/XDropdownList.vue

@@ -0,0 +1,49 @@
+<script setup>
+import {ref} from "vue";
+
+const show = ref(false);
+</script>
+
+<template>
+    <view class="relative z-[99]">
+        <view @click="show=!show">
+            <slot></slot>
+
+            <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]">
+                <slot name="menu"></slot>
+            </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>
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 300ms;
+    position: absolute;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+    position: absolute;
+}
+</style>