父组件引用：
import textTooltip from "@/components/textTooltip"
<text-tooltip :value="item.Name" :direction="'top'" :row="1"/>
三个参数：
value：文本内容
direction： tooltip展示位置
row： 几行省略
textTooltip组件代码：
<template>
<div ref="text" class="text-tooltip">
<el-tooltip :content="value" :placement="direction" effect="light" v-if="isShowHover">
<p :style="textStyle" class="tip-text">{{value}}</p>
</el-tooltip>
<p v-else class="text">{{value}}</p>
</div>
</template>
<script>
export default {
// 显示文字组件，可以设置最多显示几行，超过后会隐藏并且鼠标hover显示全部信息（需要给组件设置宽度）
name: "VueText",
props: {
value: {
type: String,
default: "",
},
row: {
//最多显示几行，超过后会...隐藏 为0时不隐藏
type: [Number, String],
default: 0,
},
direction: {
type: String,
default: "top",
},
},
computed: {
text() {
return this.$refs.text;
},
},
data() {
return {
isShowHover: false,
textStyle: {},
div: null,
};
},
watch: {
row: function (val) {
this.init();
},
value: function () {
this.isShowHover = false;
this.textStyle = {
cursor: "text",
};
this.$nextTick(() => {
this.getStyle(this.row - 0);
});
},
},
mounted() {
this.init();
},
methods: {
init() {
this.getStyle(this.row - 0);
},
getStyle(val) {
let lineHeight = getComputedStyle(this.text).lineHeight.replace("px", "") - 0 || 20;
let height = getComputedStyle(this.text).height.replace("px", "") - 0;
if (height > lineHeight * val) {
this.isShowHover = true;
this.textStyle = {
height: `${lineHeight * val}px`,
webkitLineClamp: val,
webkitBoxOrient: "vertical",
};
} else {
this.isShowHover = false;
this.textStyle = {
cursor: "text",
};
}
},
},
};
</script>
<style lang="less">
.text-tooltip {
.tip-text {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
cursor: pointer;
}
.text {
cursor: pointer;
/* line-height: 20px;
height: 20px; */
}
}
</style>
4068
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
