vue 超出两行显示查看更多按钮
JS 部分为 Vue3 版本写法
<!--描述-->
<div class="brand-info-desc">
<input id="btn-input" class="btn-input" v-model="checkbox" type="checkbox">
<div class="text">
<label class="btn" v-if="showMoreBtn" for="btn-input" :data-suffix="btnText"></label>
<pre ref="brandDesc">{{ brandInfo.description }}</pre>
</div>
</div>
.brand-info-desc {
display: flex;
width: 100%;
overflow: hidden;
@include font-size(16px, 28px);
color: #DBDBDB;
margin-top: 14px;
.text {
width: 640px;
overflow: hidden;
text-overflow: ellipsis;
text-align: justify;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
position: relative;
word-wrap: break-word;
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
&::before {
content: '';
height: calc(100% - 24px);
float: right;
}
&::after {
content: '';
width: 999vw;
height: 999vw;
position: absolute;
box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 #1E1D2B;
margin-left: -100px;
}
.btn {
float: right;
clear: both;
font-weight: 600;
margin-left: 10px;
line-height: 22px;
cursor: pointer;
position: relative;
&:hover {
text-decoration: underline;
}
&::before {
content: attr(data-suffix);
}
}
}
.btn-input {
display: none;
}
.btn-input:checked + .text {
-webkit-line-clamp: 999;
}
.btn-input:checked + .text::after {
visibility: hidden;
}
.btn-input:checked + .text .btn::before {
content: attr(data-suffix);
}
}
// 判断描述是否超过两行. 这个放到接口返回中
nextTick(() => {
if (brandDesc.value.scrollHeight > brandDesc.value.clientHeight) {
// 文本超出了
state.showMoreBtn = true
state.btnText = t('button.seeMore')
} else {
state.showMoreBtn = false
}
})
// 描述按钮文案
watch(
() => state.checkbox,
(val, prevVal) => {
if (val) {
state.btnText = t('button.seeLess')
} else {
state.btnText = t('button.seeMore')
}
}
)