二次封装的el-tooltip

原生提供的el-tooltip无法满足业务需要，当文本尚未溢出时，也依然会弹出。为了解决这个问题，对el-tooltip进行二次封装

基础用法

    <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
      	<div>11111111111</div>
    </el-tooltip>

痛点：即使内容不长，悬停也会弹出

二次封装

思路介绍：

定义一个作用域插槽，向父组件传递一个函数，该函数接收event作为参数，通过其实际宽度和被卷去宽度来设置disabled属性

<template>
    <el-tooltip :disabled="disabled" class="item" :effect="effect" :content="content" :placement="placement">
        <!-- 作用域插槽，子传父函数 -->
        <slot :mouse="handleMouse"></slot>
    </el-tooltip>
</template>

<script>
export default {
    name: 'common-tool-tip',
    props: {
        effect: {
            type: String,
            default: 'dark',
        },
        content: {
            type: String,
            default: '--',
        },
        placement: {
            type: String,
            default: 'top',
        },
    },
    data() {
        return {
            disabled: false,
        }
    },
    methods: {
        handleMouse($event) {
            let len = $event.target.scrollWidth - $event.target.offsetWidth
            this.disabled = len > 0 ? false : true
        },
    },
}
</script>

父组件

父组件给传递的内容绑定mouseenter事件，事件处理函数即为子组件传递的mouse事件

        <CommonToolTip :content="content" #default="{ mouse }">
            <div class="text" @mouseenter="mouse($event)">{{ content }}</div>
        </CommonToolTip>

二次封装el-tooltip

二次封装的el-tooltip