76 lines
1.7 KiB
Vue
76 lines
1.7 KiB
Vue
|
<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>
|