kuailelunwen_new_houtai/src/components/CustomDropdown.vue

<template>
    <div class="custom-select" v-clickaway="closeDropdown" ref="dropdown" :class="{ 'is-open': isOpen }" :style="{width}">
        <!-- 触发按钮 -->
        <div class="select-trigger" @click="toggleDropdown">
            <slot name="trigger">
                {{ selectedItem ? selectedItem[displayKey] : placeholder }}
            </slot>
            <img class="arrow-icon" :src="isOpen? require('../assets/dropDown_open.png'):require('../assets/dropDown_expand.png')" alt="">
        </div>

        <!-- 下拉内容 -->
        <transition name="slide-fade">
            <div v-if="isOpen" class="select-dropdown">
                <slot v-if="isOpen" name="normal"></slot>
                <div v-if="options">
                    <div v-for="(item, index) in options" :key="index" class="dropdown-item "
                        :class="{ 'is-selected': isSelected(item) }" @click="selectItem(item)">
                        <slot name="item" :item="item" >
                            <div class="flex-between">
                                <div class="left">
                                    <p class="one">{{ item[displayKey] }}</p>
                                </div>
                                <div class="right">
                                    <img v-if="selectedItem[displayKey] == item[displayKey]"
                                        src="../assets/register/drop-selected.svg" alt="">
                                </div>
                            </div>
                        </slot>
                    </div>
                </div>

                <div class="flex-between dropdown-item" v-if="options_null" @click="selectNullItem">
                    <div class="left">
                        <p class="one">暂无收款账号</p>
                        <p>暂时没有收款账号，我想稍后配置</p>
                    </div>
                    <div class="right">
                        <img src="../assets/register/drop-selected.svg" alt="">
                    </div>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
export default {
    props: {
        width: {
            type: String,
            default: "200px",
        },
        options: {
            type: Array,
            default: () => [],
        },
        options_null: {
            type: Object,
            default: () => {},
        },
        placeholder: {
            type: String,
            default: "请选择",
        },
        value: {
            type: [String, Number, Object],
            default: null,
        },
        valueKey: {
            type: String,
            default: "value", 
        },
        displayKey: {
            type: String,
            default: "label",
        },
    },
    data() {
        return {
            isOpen: false,
            selectedItem: null,
        };
    },
    watch: {
        value: {
            immediate: true,
            handler(newVal) {
                this.selectedItem = this.options.find((item) => item[this.valueKey] === newVal);
            },
        },
    },
    methods: {
        closeDropdown() {
            this.isOpen = false;
        },
        toggleDropdown(e) {
            if(e) {
                e.stopPropagation();
            }
            this.isOpen = !this.isOpen;
        },
        selectItem(item) {
            this.selectedItem = item;
            this.$emit("input", item[this.valueKey]); // Use the specified valueKey
            this.$emit("change", item);
            this.isOpen = false;
        },
        isSelected(item) {
            return this.selectedItem && this.selectedItem[this.valueKey] === item[this.valueKey];
        },
        selectNullItem() {
            this.$emit("changeNormal", '');
            this.isOpen = false;
        }
    },
};
</script>

<style scoped>
/* Your existing styles remain the same */
.custom-select {
    height: 38px;
    position: relative;
    font-family: Arial, sans-serif;
}

.select-trigger {
    border-radius: 2px;
    opacity: 1;
    background: #FFFFFF;
    border: 1px solid #DFE2E6;
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.is-open .select-trigger {
    border: 1px solid #006AFF;
    transition: all .5s;
    outline: 3px solid #D8E9FA;
}

.select-trigger:hover {
    border-color: #006AFF;
    transition: all .5s;
}

.arrow-icon {
    width: 12px;
}

.select-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    margin-top: 4px;
    max-height: 384px;
    overflow-y: auto;
    padding: 0 12px 12px 12px;
}

.dropdown-item {
    padding: 12px 10px;
    cursor: pointer;
}

.dropdown-item:hover {
    background: #F6F7FA;
}

.dropdown-item.is-selected {
    background-color: #F6F7FA;
    color: #006AFF;
}

/* 展开收起动画 */
.slide-fade-enter-active,
.slide-fade-leave-active {
    transition: all 0.3s ease;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
    opacity: 0;
    transform: translateY(-10px);
}
</style>