v-fold-directive指令
一个可拓展性相当高的自定义指令！
v-fold-directive 自定义指令在vue3当中实现对长文本进行省略，支持展开/收起
预览效果 （样式均可自定义开发 更简单更快速！）
收起时样式：
展开时样式：
使用方式
v-fold-directive 为自定义指令
传参为行数 如果不传则默认是三行
<div v-fold-directive="{rows:3}">
这是很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文字
</div>
JS部分代码（直接写入setup即可使用）
// Vue3环境 直接写入setup当中 ：
const vFoldDirective = {
mounted(el , dir ) {
// 获取当前DOM所占行数 除以行高 ( 务必设置行高否则可能导致报错 )
const currentRow = parseInt(el.clientHeight/(getComputedStyle(el).lineHeight.slice(0,-3)) );
// 设置当多余n行时展示 展开
const rows = dir?.value?.rows || 3;
// 判断当前行是否需要显示展开按钮
if(currentRow > rows){
// 为当前行添加溢出隐藏样式
el.classList.add('textEllipsis')
el.setAttribute('style',`-webkit-line-clamp:${
rows};--rows:${
rows};--lineHeight:${
getComputedStyle(el).lineHeight};--right:${
getComputedStyle(el).paddingRight}`)
// 创建一个展开收起的DOM
let newDom = document.createElement('span')
let foldText = '... 展开'
let unfoldText = '收起'
newDom.innerHTML = foldText
newDom.classList.add('windOrUn')
newDom.style.color = '#4772A6'
newDom.setAttribute('isUnfold','unfold') // 未展开状态
newDom.addEventListener('click',(e)=>{
// 阻止冒泡
if(window.event){
// ie 和 谷歌支持阻止冒泡
window.event.cancelBubble = true;
}
else{
// 火狐和谷歌支持的阻止冒泡
e.preventDefault();
}
if(e.target.getAttribute('isUnfold') == 'unfold'){
e.target.setAttribute('isUnfold','fold')
e.target.innerHTML = unfoldText
e.target.classList.remove('windOrUn')
el.classList.remove('textEllipsis')
}else{
e.target.setAttribute('isUnfold','unfold')
e.target.innerHTML = foldText
e.target.classList.add('windOrUn')
el.classList.add('textEllipsis')
}
})
el.appendChild(newDom)
}
},
};
scss部分
// 展开收起样式
.textEllipsis{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
word-wrap:break-word;
word-break: break-all;
white-space: normal;
-webkit-box-orient: vertical;
position: relative;
.windOrUn{
position: absolute;
top: calc(var(--lineHeight) * (var(--rows) - 1));
height: var(--lineHeight);
right: var(--right);
background: #fff;
color: #4772A6;
}
}