在el-table中有提供的属性,实现超出单元格后显示省略号,鼠标悬浮时显示详细文本,那么在普通文本中怎么实现类似的功能呢?↓
1.定义样式,实现超出部分省略号:
.con_txt { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
2.el-tooltip组件本身就是悬浮提示功能,但是我们需要给超出的文本加提示,没超出的不加提示,所以对组件进行二次封装:
<template> <div class="text-tooltip"> <el-tooltip class="item" effect="dark" :disabled="isShowTooltip" :content="content" placement="top"> <p class="over-flow" :class="className" @mouseover="onMouseOver(refName)"> <span :ref="refName">{{content||'-'}}</span> </p> </el-tooltip> </div> </template> <script> export default { name: 'textTooltip', props: { // 显示的文字内容 content: { type: String, default: () => { return '' } }, // 外层框的样式,在传入的这个类名中设置文字显示的宽度 className: { type: String, default: () => { return '' } }, // 为页面文字标识(如在同一页面中调用多次组件,此参数不可重复) refName: { type: String, default: () => { return '' } } }, data() { return { isShowTooltip: true } }, methods: { onMouseOver(str) { let parentWidth = this.$refs[str].parentNode.offsetWidth; let contentWidth = this.$refs[str].offsetWidth; // 判断是否开启tooltip功能 if (contentWidth>parentWidth) { this.isShowTooltip = false; } else { this.isShowTooltip = true; } } } } </script> <style lang="scss" scoped> .over-flow { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .wid190 { 100%; } p{ margin: 0; } </style>
3.在需要用到组件的页面中引入:
import tooltipOver from './components/tooltipOver'
4.使用组件:
<tooltip-over :content="tipText" class="wid190" refName="tooltipOver" ></tooltip-over>
tip:当同一页面使用多次组件时,需要定义不同的refName属性