基于AntDesignVue的自定义Dropdown下拉选择组件

组件效果

组件代码

<template>
    <a-dropdown :trigger="[trigger]">
        <div class="dropdownTitle">
            <span v-text="defaultText"/>
            <a-icon type="down" />
        </div>
        <a-menu slot="overlay">
            <a-menu-item v-on:click="dropItemClick(undefined)">
                <span v-text="defaultText"/>
            </a-menu-item>
            <a-menu-item v-for="option in options" :key="option.key" v-on:click="dropItemClick(option)">
                <template v-if="option.icon">
                    <a-icon style="margin-right: 5px" :type="option.icon"/>
                </template>
                <span v-text="option.name"/>
            </a-menu-item>
        </a-menu>
    </a-dropdown>
</template>

<script>
    export default {
        name: "CustomDropdown",
        props:{
            onOptionClick:{
                type:Function,
                default:function (item) {
                    console.log(item)
                }
            },
            placeholder:{
                type:String,
                default:'全部状态',
            },
            options:{
                type:Array,
                default:function () {
                    return []
                }
            },
            trigger:{
                type:String,
                default:'click',
            }
        },
        data(){
            return {
                defaultText:this.placeholder
            }
        },
        methods:{
            dropItemClick(item){
                let that = this;
                if (item){
                    that.defaultText = item.name
                } else {
                    that.defaultText = that.placeholder
                }
                this.onOptionClick(item);
            }
        },
        mounted() {

        }
    }
</script>

<style scoped>
    .dropdownTitle{
        cursor: pointer;
    }
    .dropdownTitle .anticon-down{
        margin-left: 5px;
    }
</style>

用法

引入组件，并调用

配置组件参数：