VUE中二次封装el-tootip显示自定义内容

ElementUI + VUE
普通文本超出宽度自动显示省略号，悬停显示内容。

一、使用方式

方式一：自定义内容

<lis-tooltip>{{ name }}{{ sex ? `(${sex})` : '' }}lis-tooltip>

方式二：属性传参

<lis-tooltip :content="name">lis-tooltip>

二、配置方式

修改main.js进行全局配置，可单独引用

import LisTooltip from './components/lis-tooltip';
Vue.component('lis-tooltip', LisTooltip)

三、封装代码

1、通过插槽自定义内容
2、通过props兼容el-tooltip原有属性
3、悬浮时校验文字长度，判断是否开启tooltip功能

<template>
  <el-tooltip effect="dark" :placement="placement" :disabled="isDisabled">
    <div class="over-flow" @mouseover="onMouseOver(refName)">
      <span :ref="refName">
        <slot>{{ content }}</slot>
      </span>
    </div>
    <div slot="content">
      <slot>{{ content }}</slot>
    </div>
  </el-tooltip>
</template>

<script>
export default {
  name: "Tooltip",
  props: {
  	// 用于外部调用
    refName: {
      type: String,
      default: 'content'
    },
    //  兼容el-tooltip显示的内容
    content: {
      type: String,
      default: ''
    },
    //  Tooltip 的出现位置,由于项目需要此处默认顶部
    placement: {
      type: String,
      default: 'top-start'
    }
  },
  data() {
    return {
      isDisabled: false // tooltip是否可见
    }
  },
  methods: {
  	// 判断是否开启tooltip功能
    onMouseOver(name) {
      const $refName = this.$refs[name],
        contentWidth = $refName.offsetWidth,
        parentWidth = $refName.parentNode.offsetWidth;
      this.isDisabled = contentWidth <= parentWidth;
    }
  }
}
</script>

<style lang="scss" scoped>
//  超出部分隐藏
.over-flow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  & > span {
    //  元素内禁止换行
    white-space: nowrap;
	//  样式穿透，用于控制插槽内样式
    & ::v-deep > * {
      display: inline;
    }
  }
}
</style>