update

src/components/XDropdownList.vue

@@ -1,13 +1,29 @@
 <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');
+}
 </script>
 
 <template>
-    <view class="relative z-[99]">
+    <view class="relative z-[9990]">
         <view @click="show=!show">
-            <slot></slot>
+            <view class="bg-[#fff] !py-[14rpx] !px-[24rpx] rounded-[8rpx]">
+                {{ option.find(v => v.id === modelValue)?.name }}
+            </view>
 
             <tui-icon
                 :style="{
@@ -20,8 +36,11 @@ const show = ref(false);
         </view>
 
         <transition name="fade">
-            <view v-if="show" class="absolute top-[calc(100%+10rpx)] min-w-full bg-[#fff] rounded-[8rpx] x-dropdown-card">
-                <slot name="menu"></slot>
+            <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>