封装下拉框组件

子组件

<template>
    <div class="dropDown" @mouseover="onDplOver($event)" @mouseout="onDplOut($event)">
        <span class="selected" v-text="selectItem"></span> 
        <ul class="options">
            <li @click="onLiClick(item, $event)" v-for="(item,index) in selectItems" :key="item[value]" v-text="item.name" :class="{'bor':clicked == index}">             
            </li>           
        </ul>
    </div>
</template>
<script>
export default {
    props:{
        name: {
            type: String,
            default: "name"
        },
        value: {
            type: String,
            default: "value"
        },
        selectItems:{
            type:Array,
            required:false,
            default(){
                return [
                    {name: "选项一"},
                    {name: "选项二"}
                ]
            }
        },
        selectedItem: {
            type: Object,
            required: false
        },
        placeholder: {
            type: String,
            default: '请选择'
        },
        unit: {
            type: String,
            default: ""
        }
    },
   data(){
       return{
          activeIndex:0,
          clicked:this.selectedItem.value
       }
   },
   computed:{
       //计算属性，selectItem为选中的值
        selectItem(){
            // debugger;
            // return this.selectItems[this.activeIndex].name          
            return this.selectedItem[this.name] ? this.selectedItem[this.name] + this.unit : this.placeholder;          
        }
   },
   methods:{
        //鼠标滑过时，设置ul显示
       onDplOver(event){
            let ul = event.currentTarget.childNodes[1];
            ul.style.display = "block";
        },
        // 鼠标滑出时，ul隐藏
        onDplOut(event){
            let ul = event.currentTarget.childNodes[1];
            ul.style.display = "none";
        },
        onLiClick(index){
            // debugger;
            // 需要获取事件冒泡的所有元素,path是数组
            // this.clicked = index;  
            // let path = event.path || (event.composedPath && event.composedPath()) //兼容火狐和safari
            // path[1].style.display = "none";
            // this.activeIndex = index;  
            // this.selectedItem[this.name] = this.selectItems[index].name;
            // debugger
            // console.log('选中项',this.selectedItem[this.name])
            // this.selectedItem = index;
            // 向父组件发送值
            // this.$emit("change", {
            //     index:index,
            //     value:this.selectItems[index]
            // })
            this.$emit('update:selectedItem',  index)
        }
   },
   
}
</script>
<style lang="less" scoped>
.dropDown{
    .selected{
        width: 120px;
        height: 27px;
        display: inline-block;
        vertical-align: middle;
        border: 1px solid #333;
        border-radius: 4px;
        text-align: center;
        font-size: 14px;
        line-height: 27px;
    }
    .options{
        padding: 0;
        margin: 0;
        width: 120px;
        border: 1px solid #333;
        border-radius: 4px;
        display: none;

        li{
            width: 100%;
            height: 27px;
            text-align: center;
            padding: 0;
            cursor: pointer;

            &:hover{
               background: #ededed;
            }
            
        }

        .bor{
            border: 1px solid blue;
            border-radius: 4px;
        }
    }
}
</style>

父组件

<dropDown :selectItems='selectItems' :name="'name'" :value="'value'" :selectedItem.sync="selectedcategory"></dropDown>