-
效果圖
只針對溢出的文字觸發(fā)文字提示組件
<template>
<div id="ellipsis">
<div class="contentCls" :style="{ width: width }">
<el-tooltip
:effect="effect"
:disabled="isElTooltipShow"
:content="contentText"
:placement="placement"
>
<span @mouseenter="hanldeElTooltip">{{ contentText }}</span>
</el-tooltip>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component
export default class Ellipsis extends Vue {
// Tooltip 出現(xiàn)位置跑杭。位置匯總：top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
@Prop({
type: String,
default: "top-start"
})
placement!: string;
// Tooltip 外層殼的寬度,default自定義設(shè)置
@Prop({
type: String,
default: 1
})
outerShellWidth!: string | number;
// 文本內(nèi)容
@Prop({
type: String,
default: ""
})
contentText!: string;
// 文字提示主題
@Prop({
type: String,
default: "dark"
})
effect!: string;
get width() {
// Tooltip 外層殼寬度自動(dòng)填充px
return this.outerShellWidth + "px";
}
isElTooltipShow = true;
hanldeElTooltip(val: any) {
this.isElTooltipShow =
val.target.offsetWidth > this.outerShellWidth ? false : true;
}
}
</script>
<style scoped lang="scss">
#ellipsis {
width: 100%;
.contentCls {
// 外層殼已做單行文本溢出顯示省略號處理
display: inline-block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
}
}
</style>
