使用el-tooltip封装省略号组件内容超出显示tooltip

在公共组件中封装el-tooltip的显示,当传入的内容超出父元素的大小时,显示tooltip组件

第一种方式(单行)

组件封装

<template>
  <div class="tooltip-container">
    <el-tooltip class="my-tooltip" :disabled="showTooltip" :content="text">
      <p ref="tooltipBox" class="text-box">
        <span ref="tooltipItem" class="">{{ text }}</span>
      </p>
    </el-tooltip>
  </div>
</template>

<script>
export default {
  name: 'MyTooltip',
  props: {
    text: {
      type: String,
      default: () => ''
    }
  },
  data () {
    return {
      showTooltip: true
    }
  },
  watch: {
    text: {
      handler () {
        this.$nextTick(() => this.checkWidth())
      },
      immediate: true
    }
  },
  methods: {
    checkWidth () {
      const boxWidth = this.$refs.tooltipBox.offsetWidth
      const itemWidth = this.$refs.tooltipItem.offsetWidth
      this.showTooltip = boxWidth > itemWidth
    }
  }
}
</script>
<style scoped lang="scss">
.tooltip-container {
  width: 100%;

  .text-box {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>

组件使用

<template>
  <div class="test">
    <MyTooltip :text="'超出部分显出部分显出部超出部分显出部分显出部超出部分显出部分显出部'"></MyTooltip>
  </div>
</template>

<script>
import MyTooltip from '@/components/MyTooltip'
export default {
  name: 'demoPage2',
  components: {
    MyTooltip
  },
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>

<style lang="scss">
.test{
  width:150px;
  cursor:pointer;
}
</style>

显示效果

第二种方式(单行)

组件封装

<template>
  <el-tooltip effect="light" :content="content" placement="top" :disabled="isDisabled">
    <div class="cm-tooltip" @mouseover="mouseoverHandle">
      <span ref="contentRef">{{ content }}</span>
    </div>
  </el-tooltip>
</template>

<script>
export default {
  name: 'MyTooltip',
  props: {
    content: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {
      isDisabled: false
    }
  },
  methods: {
    mouseoverHandle () {
      const parentWidth = this.$refs.contentRef.parentNode.offsetWidth
      const width = this.$refs.contentRef.offsetWidth
      this.isDisabled = width <= parentWidth
      console.log(this.isDisabled, parentWidth, width)
    }
  }
}
</script>
<style scoped lang="scss">
.cm-tooltip{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>

组件使用

<template>
  <div class="test">
    <MyTooltip :content="'超出部分显出部分显出部超出部分显出部分显出部超出部分显出部分显出部'"></MyTooltip>
  </div>
</template>

<script>
import MyTooltip from '@/components/MyTooltip2'
export default {
  name: 'demoPage2',
  components: {
    MyTooltip
  },
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>

<style lang="scss">
.test{
  width:150px;
  cursor:pointer;
}
</style>

显示效果

第三种方式(多行)

组件封装

<template>
  <el-tooltip effect="light" :content="content" placement="top" :disabled="isDisabled">
    <div class="cm-tooltip" @mouseover="mouseoverHandle">
      <span ref="contentRef">{{ content }}</span>
    </div>
  </el-tooltip>
</template>

<script>
export default {
  name: 'MyTooltip',
  props: {
    content: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {
      isDisabled: false
    }
  },
  methods: {
    mouseoverHandle () {
      const parentHeight = this.$refs.contentRef.parentNode.offsetHeight
      const height = this.$refs.contentRef.offsetHeight
      this.isDisabled = height <= parentHeight
    }
  }
}
</script>
<style scoped lang="scss">
.cm-tooltip{
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  line-break: anywhere;
  -webkit-box-orient: vertical;
}
</style>

组件使用

<template>
  <div class="test">
    <MyTooltip :content="'超出部分显出部分显出部超出部分显出部分显出部超出部分显出部分显出部'"></MyTooltip>
  </div>
</template>

<script>
import MyTooltip from '@/components/MyTooltip2'
export default {
  name: 'demoPage2',
  components: {
    MyTooltip
  },
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>

<style lang="scss">
.test{
  width:150px;
  cursor:pointer;
}
</style>

显示效果