文本溢出隐藏 显示省略号，鼠标悬浮展示 el-tooltip（TooltipIsShowMixin封装）

目录

• [mixins 封装](#mixins 封装)
• [使用 TooltipIsShowMixin](#使用 TooltipIsShowMixin)
• 效果展示

mixins 封装

TooltipIsShowMixin.js

export const TooltipIsShowMixin = {
  data() {
    return {
      tooltipIsShow: false
    }
  },
  methods: {
    tooltipIsDisHandler(className) {
      this.$nextTick(() => {
        const dom = document.querySelector(className)
        const domScrollWidth = dom && dom.scrollWidth
        const domClientWidth = dom && dom.clientWidth
        // console.log('domScrollWidth----', domScrollWidth)
        // console.log('domClientWidth----', domClientWidth)
        this.tooltipIsShow = domClientWidth >= domScrollWidth
      })
    }
  }
}

使用 TooltipIsShowMixin

<div class="list" :style="{ '--height': tableMaxHeight + 'px' }">
  <div v-for="(item, index) in tableData" :key="index" class="list-card">
    <div class="list-card-pic">
      <div class="list-card-pic-type">{{ item.type }}</div>
      <div class="list-card-pic-time">{{ item.duration }} {{ item.createTime }}</div>
    </div>
    <div class="list-card-info">
      <div class="list-card-info-header">
        <div class="list-card-info-header-title font-bold text-lg">{{ item.title }}</div>
        <div class="list-card-info-header-opera">
          <el-button type="text" icon="el-icon-edit" />
          <el-button type="text" icon="el-icon-delete" />
        </div>
      </div>
      <div class="list-card-info-describe">
        <el-tooltip
          effect="dark"
          :content="item.description"
          placement="top-start"
          :disabled="tooltipIsShow"
        >
          <span
            :class="[`description${index}`]"
            @mouseenter="tooltipIsDisHandler(`.description${index}`)"
          >
            {{ item.description }}
          </span>
        </el-tooltip>
      </div>
    </div>
  </div>
</div>

<script>
import { TooltipIsShowMixin } from '@/mixins/TooltipIsShowMixin'

export default {
  // ...
  mixins: [TooltipIsShowMixin],
}
</script>
<style scoped lang="scss">
.list {
  height: var(--height);
  overflow: auto;
  &-card {
    display: inline-block;
    width: calc(25% - 12px);
    margin: 0 15px 15px 0;
    box-shadow: 0 0 5px #ccc;

    &:nth-child(4n) {
      margin-right: 0;
    }

    &-pic {
      height: 170px;
      background: url('~@/assets/image/default-course-cover.png') no-repeat;
      background-size: 100% 100%;
      position: relative;
      color: #fff;
      $width: 10px;
      &-type {
        position: absolute;
        top: $width;
        right: $width;
        background: rgba($color: #fff, $alpha: 0.3);
        border-radius: 10px;
        padding: 3px 8px;
      }
      &-time {
        position: absolute;
        bottom: $width;
        right: $width;
      }
    }
    &-info {
      padding: 10px 20px;
      background-color: #fff;
      &-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      &-describe {
        margin: 5px 0;
        color: #00000073;
        span {
          display: inline-block;
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}
</style>

效果展示

未溢出的鼠标悬浮不展示 el-tooltip

溢出展示省略号的鼠标悬浮展示 el-tooltip