<template>
<ElTooltip
ref="jgyTooltip"
:content="content"
:disabled="disabled"
:placement="placement"
:open-delay="openDelay"
:popper-class="popperClass"
:style="styleObject"
>
<!-- 自定義設(shè)置tootips內(nèi)容最大高度壶辜, 默認為0 -->
<div slot="content" v-if="slotMaxHeight > 0" class="custom-slot" :style="slotStyle">
{{ getContent(content) }}
</div>
<!-- 設(shè)置tootips內(nèi)容位dom插入模式挨约,解決換行展示問題, 默認為false -->
<div slot="content" v-if="domInsert" v-html="ToBreak(getContent(content))"></div>
<template>
<!-- 自定義插槽 -->
<template v-if="isSlot">
<div ref="ellipsis" @mouseover="onMouseOver" :style="ellipsisLink">
<slot></slot>
</div>
</template>
<!-- 其他類型 -->
<template v-else>
<!-- 超過指定高度展示 -->
<div
class="custom-ellipsis"
:class="className"
@mouseover="onMouseOver"
v-if="!isCharacter"
>
<span class="ellipsis-span" ref="ellipsis" :style="ellipsisLink">
{{ getContent(content) }}
</span>
</div>
<!-- 超過指定字符展示 -->
<span v-else :style="ellipsisLink">{{ displayText }}</span>
</template>
</template>
</ElTooltip>
</template>
<script>
import { isNil } from 'lodash'
export default {
name: 'jgyLineCustomTooltip',
props: {
lineHeight: { type: Number, default: 22 }, // 設(shè)置文本行高
maxHeight: { type: Number, default: 22 }, // 設(shè)置最大可展示高度
maxWidth: { type: [String, Number], default: 'inherit' }, // 兼容設(shè)置最大可展示寬度
line: { type: [Number, String], default: 1 }, // 設(shè)置超過幾行...
content: { type: [String, Number], default: '' }, // 內(nèi)容
placement: { type: String, default: 'top' }, // 展示位置
className: { type: String, default: '' }, // 自定義類名
openDelay: { type: Number, default: 300 }, // 延遲展示
isLink: { type: Boolean, default: false }, // 是否可點擊
limit: { type: Number, default: 6 }, // 超過幾個字符展示
isCharacter: { type: Boolean, default: false }, // 是否為字符控制
isSlot: { type: Boolean, default: false }, // 是否為自定義插槽
slotMaxHeight: { type: Number, default: 0 }, // tootips最大高度設(shè)置舵盈,超出滾動, 默認不滾動
customTooltips: { type: String, default: '' }, // 自定義tootips類
isDisabled: { type: Boolean, default: false }, // 是否主動禁用
domInsert: { type: Boolean, default: false } // tooltip內(nèi)容是否使用v-html插入毡咏,解決換行顯示問題
},
data() {
return {
disabled: false
}
},
watch: {
// 控制字符是否有彈窗判斷
content: {
handler() {
if (this.isCharacter) {
if (this.content) {
this.disabled = this.content && this.content.length <= this.limit
} else {
this.disabled = true
}
}
},
immediate: true
},
isDisabled: {
handler(val) {
const { content, limit, isCharacter } = this
// 控制指定字符溢出隱藏
this.disabled = val || (isCharacter && content?.length <= limit)
},
immediate: true
}
},
computed: {
// 自定義tootips最大高度
slotStyle() {
return this.slotMaxHeight
? `maxHeight:${this.slotMaxHeight + 'px'};overflow: hidden;overflow-y:scroll`
: ''
},
// 字符截取
displayText() {
const { content, limit } = this
const text = content !== '' && !isNil(content) ? content : '-'
if (text?.length > limit) {
return text.slice(0, this.limit) + '...'
} else {
return text
}
},
// 文本處理
getContent() {
return val => (val !== '' && !isNil(val) ? val : '-')
},
// 設(shè)置樣式
styleObject() {
const maxHeight = this.lineHeight * this.line
const maxWidth = typeof this.maxWidth === 'string' ? this.maxWidth : this.maxWidth + 'px'
return {
maxHeight: `${maxHeight}px`,
maxWidth: maxWidth,
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
'-webkit-box-orient': 'vertical',
'-webkit-line-clamp': this.line
}
},
ellipsisLink() {
return {
cursor: this.isLink ? 'pointer' : 'default'
}
},
popperClass() {
return this.customTooltips
? `jy-custom-tooltips ${this.customTooltips}`
: 'jy-custom-tooltips'
}
},
methods: {
// 鼠標事件判斷
onMouseOver() {
if (this.isDisabled) return
try {
this.$nextTick(_ => {
const domEl = this.isSlot ? this.$refs['ellipsis']?.children[0] : this.$refs['ellipsis']
const domElHeight = domEl.offsetHeight
this.disabled = domElHeight <= this.maxHeight
})
} catch (error) {
console.log(error)
}
},
ToBreak(val) {
return val.replace(/\n/g, '<br/>')
}
}
}
</script>
<style lang="scss">
.jy-custom-tooltips {
max-width: 400px;
display: -webkit-box;
-webkit-box-orient: vertical;
word-wrap: break-word;
}
</style>
<style scoped lang="scss">
.custom-ellipsis {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: pre-line;
word-break: break-all;
}
.custom-slot {
&::-webkit-scrollbar {
width: 4px;
border: 6px;
}
}
</style>
自定義封裝溢出隱藏組件
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
- 文/潘曉璐 我一進店門纹安,熙熙樓的掌柜王于貴愁眉苦臉地迎上來尤辱,“玉大人,你說我怎么就攤上這事厢岂」舛剑” “怎么了?”我有些...
- 文/不壞的土叔 我叫張陵塔粒,是天一觀的道長结借。 經(jīng)常有香客問我,道長窗怒,這世上最難降的妖魔是什么映跟? 我笑而不...
- 正文 為了忘掉前任,我火速辦了婚禮扬虚,結(jié)果婚禮上努隙,老公的妹妹穿的比我還像新娘。我一直安慰自己辜昵,他們只是感情好荸镊,可當我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著堪置,像睡著了一般躬存。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上舀锨,一...
- 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼承桥!你這毒婦竟也來了驻粟?” 一聲冷哼從身側(cè)響起,我...
- 正文 年R本政府宣布轩褐,位于F島的核電站椎咧,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏把介。R本人自食惡果不足惜勤讽,卻給世界環(huán)境...
- 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望拗踢。 院中可真熱鬧脚牍,春花似錦、人聲如沸巢墅。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽君纫。三九已至驯遇,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蓄髓,已是汗流浹背叉庐。 一陣腳步聲響...
推薦閱讀更多精彩內(nèi)容
- 需求: 當表頭的內(nèi)容過長隱藏顯示 ... 鼠標移上去顯示全部內(nèi)容,表頭不是固定內(nèi)容昵慌,是根據(jù)后臺返回的字段,動態(tài)渲染...
- 組件 使用 observer 的目的是 組件某一個屬性改變淮蜈,獲得監(jiān)聽斋攀,處理想要的數(shù)據(jù)。 但是梧田,直接改變 pro...
- demo 地址: https://github.com/iotjin/Jh_weapp 效果圖: demo代碼: ...
- 簡單分享下該組件用法和參數(shù) 基礎(chǔ)用法 使用該組件的時候需要給其一個高度裁眯,它畢竟是滾動條組件鹉梨,高度是對它最起碼的尊重...
- 一疤孕、組件的定義與使用 1、vue文件的組成 (1)模板頁面 (2)js模塊對象 (3)樣式 2搔课、基本使用 (1)引...