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.label : placeholder }}
            </slot>
            <img class="arrow-icon" :src="isOpen? require('../assets/dropDown_open.png'):require('../assets/dropDown_expand.png')" alt="">
            <!-- <span class="arrow-icon">{{ isOpen ? img : "▼" }}</span> -->
        </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">
                            {{ item.label }}
                        </slot>
                    </div>
                </div>

                <!-- <slot v-if="isOpen" name="options_null"></slot> -->
                <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>
// import { mixin as clickaway } from 'vue-clickaway';
export default {
    props: {
        width:{
            type: String,
            default: "200px",
        },
        options: {
            type: Array,
            // required: true,
            default: () => [],
        },
        options_null: {
            type: Object,
            default: () => {},
        },
        placeholder: {
            type: String,
            default: "请选择",
        },
        value: {
            type: [String, Number, Object],
            default: null,
        },

    },
    // mixins: [clickaway],
    data() {
        return {
            isOpen: false,
            selectedItem: null,
        };
    },
    mounted(){
        // document.addEventListener('click', this.handleClickOutside);
    },
    beforeUnmount() {
        // 移除监听
        // document.removeEventListener('click', this.handleClickOutside);
    },
    watch: {
        value: {
            immediate: true,
            handler(newVal) {
                this.selectedItem = this.options.find((item) => item.value === newVal);
            },
        },
    },
    methods: {
        closeDropdown() {
            this.isOpen = false;
        },
        toggleDropdown() {
            this.isOpen = !this.isOpen;
        },
        selectItem(item) {
            this.selectedItem = item;
            this.$emit("input", item.value); // 更新 v-model 的值
            this.$emit("change", item); // 触发 change 事件
            this.isOpen = false;
        },
        isSelected(item) {
            return this.selectedItem && this.selectedItem.value === item.value;
        },
        selectNullItem(){
            // this.$emit("input", null); // 更新 v-model 的值
            this.$emit("changeNormal", ''); // 触发 change 事件
            this.isOpen = false;
        }
    },
};
</script>

<style scoped>
.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: calc(100% - 24px);
    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: transparent;
    color: #fff;
}

/* 展开收起动画 */
.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>