前言：
el-tooltip組件本身就是懸浮提示功能窃肠，在對它進(jìn)行二次封裝時，要對它進(jìn)行優(yōu)化刷允，實現(xiàn)超出的文本加提示冤留，沒超出的不給予提示。
- 思路：加一個中間層树灶，子集為數(shù)據(jù)全量纤怒，控制中間層的樣式，并設(shè)置寬度天通，通過 ref 進(jìn)行寬度對比泊窘，若子集比中間層更寬，既說明顯示了...樣式
<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屬性
感謝博客 https://www.cnblogs.com/97pkp/p/12895693.html
還有一種思路：在文本溢出時需要對文本進(jìn)行處理诺祸；相對于一定高度的容器携悯，溢出容器部分的文本顯示省略號，同時筷笨，鼠標(biāo)移入通過顯示tooltip來顯示文本的具體內(nèi)容憔鬼。
詳情請見 http://www.reibang.com/p/239d0d446587
如果你也經(jīng)常使用element-ui 可持續(xù)關(guān)注 Element UI 入坑小結(jié)
如果本文對你有所幫助龟劲，感謝點(diǎn)一顆小心心，您的支持是我繼續(xù)創(chuàng)作的動力轴或！
