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

思路：加一個中間層，子集為數(shù)據(jù)全量，控制中間層的樣式，并設(shè)置寬度，通過 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: {// 顯示的文字內(nèi)容content: {type: String,default: () => {return ''}},// 外層框的樣式，在傳入的這個類名中設(shè)置文字顯示的寬度className: {type: String,default: () => {return ''}},// 為頁面文字標(biāo)識（如在同一頁面中調(diào)用多次組件，此參數(shù)不可重復(fù)）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：當(dāng)同一頁面使用多次組件時，需要定義不同的refName屬性?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。