平常做項(xiàng)目總會(huì)遇到文字太長(zhǎng)二跋，有的顯示1行，超出隱藏虚循，有的顯示兩行同欠，而且還會(huì)遇到鼠標(biāo)hover時(shí)展示省略的部分，考慮用vue封裝成公用的組件横缔。
需要用到以下內(nèi)容
- 文字超出多行隱藏
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //行數(shù)
-webkit-box-orient: vertical;
- 判斷文字是否處于隱藏的狀態(tài)
需要涉及到獲取文字在標(biāo)簽寬度下的實(shí)際高度铺遂，動(dòng)態(tài)加上css控制溢出隱藏。使用getComputedStyle方法計(jì)算元素的高度height和行高茎刚，行高乘以行數(shù)得到隱藏后的高度height1襟锐，當(dāng)height超過(guò)height1時(shí)，當(dāng)前應(yīng)處于被隱藏狀態(tài)
let lineHeight = getComputedStyle(element).lineHeight.replace("px", "") - 0 || 20;
let height = getComputedStyle(element).height.replace("px", "") - 0;
//這里使用-0將字符串轉(zhuǎn)化成數(shù)字
組件結(jié)構(gòu)
1.png
組件全量代碼如下
<template>
<div
class="vue-text"
ref="text"
:style="textStyle"
@mouseenter="mouseenter"
@mouseleave="mouseleave"
>
{{ value }}
</div>
</template>
<script>
export default {
// 顯示文字組件膛锭，可以設(shè)置最多顯示幾行粮坞，超過(guò)后會(huì)隱藏并且鼠標(biāo)hover顯示全部信息（需要給組件設(shè)置寬度）
name: "VueText",
props: {
value: {
type: String,
default: "",
},
row: {
//最多顯示幾行，超過(guò)后會(huì)...隱藏 為0時(shí)不隱藏
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>
組件接受兩個(gè)參數(shù)初狰，value：展示的文字內(nèi)容莫杈，row：最多展示幾行（需要給組件設(shè)置寬度），同時(shí)在body插入了一個(gè)div奢入，hover展示文字的全部?jī)?nèi)容筝闹。
index.js文件代碼如下
import VueText from './VueText'
const component = {
install: function(Vue){
Vue.component('VueText',VueText)
}
}
export default component
在組件內(nèi)的使用
- 在main.js內(nèi)引用
import component from '@/components/VueText'
Vue.use(component)
- 在組件內(nèi)的引用
import VueText from '@/components/VueText'
export default {
name: "xxx",
components: {
VueText
}
}
- 使用
<vue-text
value="遙襟甫暢，逸興遄飛腥光。爽籟發(fā)而清風(fēng)生关顷，纖歌凝而白云遏。睢園綠竹武福，氣凌彭澤之樽议双；鄴水朱華，光照臨川之筆捉片。四美具平痰，二難并汞舱。窮睇眄于中天，極娛游于暇日宗雇。天高地迥兵拢，覺(jué)宇宙之無(wú)窮；興盡悲來(lái)逾礁，識(shí)盈虛之有數(shù)说铃。望長(zhǎng)安于日下，目吳會(huì)于云間嘹履。地勢(shì)極而南溟深腻扇，天柱高而北辰遠(yuǎn)。關(guān)山難越砾嫉，誰(shuí)悲失路之人幼苛？萍水相逢，盡是他鄉(xiāng)之客焕刮。"
style="width: 300px"
row="2"
/>
ps: 有小伙伴提了個(gè)bug舶沿，當(dāng)頁(yè)面滾動(dòng)時(shí)，彈窗的位置會(huì)出現(xiàn)問(wèn)題配并，然后重新寫了下括荡，獲取組件最近一個(gè) overflow 值為 auto 或 scroll 的父元素，監(jiān)聽(tīng)滾動(dòng)溉旋，滾動(dòng)時(shí)關(guān)閉彈窗畸冲。同時(shí)加上了高度碰撞檢測(cè)。代碼地址：vue-cy-admin
再次更新观腊，最近在寫vue3邑闲，又寫了一版vue3的版本，新建一個(gè)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
}
// 計(jì)算樣式
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>
