el-tooltip 如果文字太长，显示....鼠标移上去显示气泡，气泡内显示全部文字

原创已于 2024-05-23 15:49:18 修改 · 564 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2024-05-23 15:44:34 首次发布

组件 tooltipOver.vue


<template>
  <div class="text-tooltip">
    <el-tooltip class="item" effect="dark" :disabled="isShowTooltip" :content="content" placement="top">
      <p class="over-flow"  @mouseover="onMouseOver(refName)">
        <span :ref="refName">{{content}}</span>
      </p>
    </el-tooltip>
  </div>
</template>
 
<script>
  export default {
    name: 'textTooltip',
    props: {
      // 显示的文字内容
      content: {
        type: String,
        default: () => {
          return ''
        }
      },
      refName: {
        type: String,
        default: () => {
          return ''
        }
      }
    },
    data() {
      return {
        isShowTooltip: true
      }
    },
    methods: {
      onMouseOver(str) {
        const parentWidth = this.$refs[str].parentNode.offsetWidth;
        const contentWidth = this.$refs[str].offsetWidth;
        // 判断是否开启tooltip功能
        if (contentWidth>parentWidth) {
          this.isShowTooltip = false;
        } else {
          this.isShowTooltip = true;
        }
      }
    }
  }
</script>
 
<style scoped>
.over-flow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0px;
}
</style>

使用：

 <el-form-item 
                label-position="right"
                label-width="110px"
                label="XXX："
                prop="xxx"
                class="readonly">
             <tooltip-over :content="dataAddForm.xxx"
                           :refName="'xxx'"></tooltip-over>
import tooltipOver from '@/components/tooltipOver/tooltipOver.vue'
...
 components: { tooltipOver },
....
<style scoped lang="scss">
.readonly {
  overflow-x: auto;
  /deep/ .el-form-item__content {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }
}
</style>