前言：el-tooltip 組件本身就是懸浮提示功能，在對它進行二次封裝時，要對它進行優化，實現超出的文本加提示，沒超出的不給予提示。

思路：加一個中間層，子集為數據全量，控制中間層的樣式，并設置寬度，通過 ref 進行寬度對比，若子集比中間層更寬，既說明顯示了...樣式

?

<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 {width: 100%; } p{margin: 0; } </style>

在需要用到組件的頁面中引入?

?

import tooltipOver from './components/tooltipOver'

使用組件?

<tooltip-over:content="tipText"class="wid190"refName="tooltipOver" ></tooltip-over>

tip：當同一頁面使用多次組件時，需要定義不同的refName屬性?

總結

以上是生活随笔為你收集整理的element-ui —— el-tooltip 超出部分显示省略号，鼠标悬浮显示详情的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。