VUE+ElementUI 多选框/单选框鼠标hover悬浮时的提示信息组件

VUE+ElementUI+js编写一个多选框/单选框，当鼠标hover悬浮时的提示信息组件。

效果展示

 

 

核心代码

<template>
    <div class="multiple-select" @mouseover="showScrollbar = true" @mouseleave="showScrollbar = false" >
        <el-tooltip class="item" effect="light" :content="selectParamName" placement="top-start" popper-class="my-tooltip" :disabled="selectParamName.length === 0">
            <el-select popper-class="ellipsis" :class="{'show-scrollbar':   showScrollbar}" multiple :disabled="disabled" :value="defaultValue" @change="selectChange" :placeholder="placeholder">
                <el-option
                    v-for="item in list"
                    :key="item[listKey]"
                    :label="item[listValue]"
                    :value="item[listKey]"
                    :title="item[listValue]"
                >
                </el-option>
            </el-select>
        </el-tooltip>
    </div>
</template>
<script>
export default {
    props: {
        // 是否可编辑 必传
        disabled: {
            required: true,
            type: Boolean,
            default: false
        },
        // 绑定值
        value: {
            required: true,
            type: [String, Number, Array, Object],
            default: "",
        },
        // 下拉数据
        list: {
            required: true,
            type: Array,
            default: () => []
        },
        // 下拉框取值的key value 键名
        listKey: {
            required: true,
            type: String,
            default: ""
        },
        listValue: {
            required: true,
            type: String,
            default: ""
        },
        placeholder: {
            required: true,
            type: String,
            default: ""
        }
    },
    data() {
        return {
            defaultValue: "",
            showScrollbar: false,
        }
    },
    watch: {
        value: {
            handler(value) {
                this.defaultValue = value;
            },
            immediate: true,
        }
    },
    computed:{
        selectParamName(){
            let selectParamNameList = this.list.filter((item) => {
                return this.defaultValue.find(prop => {
                    return item[this.listKey] === prop
                })
            });
            let selectNamelist=[];
            selectParamNameList.forEach(item => {
                selectNamelist.push(item[this.listValue]);
            })
            return selectNamelist.join('，');     
        }
    },
    methods: {
        selectChange(value) {
            this.defaultValue = value;
            this.$emit("selectChange", value);
        },
    }
}
</script>
<style lang="scss">
.ellipsis {
    .el-select-dropdown__item {
        max-width: 300px;
    }
}
//提示框样式
.el-popup-parent--hidden > .my-tooltip{
    font-size:	14px;   
    max-width:  600px;
    border-radius: 0px;
}
.multiple-select {
    // 多选el-select
    .el-select {
        .el-select__tags {
            flex-wrap: unset;
            overflow-x: auto;
        }
        .el-select__tags-text {
            max-width: 100px;
            text-overflow: ellipsis;
        }
        // 兼容低版本浏览器
        .el-select__tags>span {
            display: inherit !important;
        }
        /*定义滚动条样式（高宽及背景）*/ 
        .el-select__tags::-webkit-scrollbar { 
            width: 5px;   /* 滚动条宽度， width：对应竖滚动条的宽度  height：对应横滚动条的高度*/
            height:3px;
        }

        /*定义滑块 样式*/ 
        .el-select__tags::-webkit-scrollbar-thumb { 
            border-radius: 10px; 
            background:rgba(0,0,0,0);
            // background: #e9e9eb;
        }
    }
    .show-scrollbar {
        /*定义滑块 样式*/ 
        .el-select__tags::-webkit-scrollbar-thumb { 
            border-radius: 10px; 
            background: #e9e9eb;
        }
    }
}
</style>

属性解析

el-tooltip 

 el-select