平常做项目总会遇到文字太长，有的显示1行，超出隐藏，有的显示两行，而且还会遇到鼠标hover时展示省略的部分，考虑用vue封装成公用的组件。
需要用到以下内容
- 文字超出多行隐藏
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //行数
-webkit-box-orient: vertical;
- 判断文字是否处于隐藏的状态
需要涉及到获取文字在标签宽度下的实际高度，动态加上css控制溢出隐藏。使用getComputedStyle方法计算元素的高度height和行高，行高乘以行数得到隐藏后的高度height1，当height超过height1时，当前应处于被隐藏状态
let lineHeight = getComputedStyle(element).lineHeight.replace("px", "") - 0 || 20;
let height = getComputedStyle(element).height.replace("px", "") - 0;
//这里使用-0将字符串转化成数字
组件结构
1.png
组件全量代码如下
<template>
<div
class="vue-text"
ref="text"
:style="textStyle"
@mouseenter="mouseenter"
@mouseleave="mouseleave"
>
{{ value }}
</div>
</template>
<script>
export default {
// 显示文字组件，可以设置最多显示几行，超过后会隐藏并且鼠标hover显示全部信息（需要给组件设置宽度）
name: "VueText",
props: {
value: {
type: String,
default: "",
},
row: {
//最多显示几行，超过后会...隐藏 为0时不隐藏
type: [Number, String],
default: 0,
},
},
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.div = document.querySelector(".hover-wrap");
if (!this.div && this.row - 0) {
this.div = document.createElement("div");
this.div.className = "hover-wrap";
this.div.style.top = 0;
this.div.style.left = 0;
document.body.append(this.div);
}
if (this.div && this.row - 0) {
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`,
overflow: "hidden",
textOverflow: "ellipsis",
display: "-webkit-box",
webkitLineClamp: val,
webkitBoxOrient: "vertical",
cursor: "pointer",
};
} else {
this.isShowHover = false;
this.textStyle = {
cursor: "text",
};
}
},
mouseenter(e) {
if (!this.isShowHover) {
return;
}
let box = e.target.getBoundingClientRect();
let top = box.top + box.height + "px";
let left = 0;
this.div.innerHTML = this.value;
left =
box.left +
(box.width - this.div.getBoundingClientRect().width) / 2 +
"px";
this.div.style.top = top;
this.div.style.left = left;
this.div.classList.add("active");
},
mouseleave(e) {
if (!this.isShowHover) {
return;
}
if (e.relatedTarget !== this.div) {
this.div.style.top = 0;
this.div.style.left = 0;
this.div.classList.remove("active");
}
this.div.onmouseleave = () => {
this.div.style.top = 0;
this.div.style.left = 0;
this.div.classList.remove("active");
};
},
},
};
</script>
<style lang="css">
.hover-wrap {
position: absolute;
background-color: #fff;
color: #666;
font-size: 14px;
line-height: 1.4;
padding: 6px 10px;
border-radius: 5px;
border: 1px solid #eee;
max-width: 400px;
transition: opacity 0.3s linear;
z-index: -1;
opacity: 0;
}
.hover-wrap.active {
z-index: 1999;
opacity: 1;
}
</style>
组件接受两个参数，value：展示的文字内容，row：最多展示几行（需要给组件设置宽度），同时在body插入了一个div，hover展示文字的全部内容。
index.js文件代码如下
import VueText from './VueText'
const component = {
install: function(Vue){
Vue.component('VueText',VueText)
}
}
export default component
在组件内的使用
- 在main.js内引用
import component from '@/components/VueText'
Vue.use(component)
- 在组件内的引用
import VueText from '@/components/VueText'
export default {
name: "xxx",
components: {
VueText
}
}
- 使用
<vue-text
value="遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。"
style="width: 300px"
row="2"
/>
ps: 有小伙伴提了个bug，当页面滚动时，弹窗的位置会出现问题，然后重新写了下，获取组件最近一个 overflow 值为 auto 或 scroll 的父元素，监听滚动，滚动时关闭弹窗。同时加上了高度碰撞检测。代码地址：vue-cy-admin
再次更新，最近在写vue3，又写了一版vue3的版本，新建一个vue文件，弹窗提示直接用的element-plus的tooltip
<script lang="jsx">
export default defineComponent({
props: {
value: {
type: String,
default: ''
},
row: {
type: [Number, String],
default: 0
},
width: {
type: String,
default: '100%'
}
},
setup: (props) => {
let { value, row, width } = props
let isShowHover = ref(false)
let textStyle = ref({
width
})
// 获取ref
const text = ref('')
const textShow = (el) => {
text.value = el
}
// 计算样式
const getStyle = (val) => {
let lineHeight = getComputedStyle(text.value).lineHeight.replace('px', '') - 0
let height = getComputedStyle(text.value).height.replace('px', '') - 0
if (height > lineHeight * val) {
isShowHover.value = true
textStyle.value = {
height: `${lineHeight * val}px`,
overflow: 'hidden',
textOverflow: 'ellipsis',
display: '-webkit-box',
webkitLineClamp: val,
webkitBoxOrient: 'vertical',
cursor: 'pointer',
width
}
} else {
isShowHover.value = false
textStyle.value = {
cursor: 'text',
width
}
}
}
onMounted(() => {
getStyle(row)
})
return () => (
isShowHover.value
? <el-tooltip content={value} placement="top" effect="light" visible-arrow={false}>
<div ref={textShow} style={textStyle.value}>{value}</div>
</el-tooltip>
: <div ref={textShow} style={textStyle.value}>{value}</div>
)
}
})
</script>
