效果
组件
<template>
<div class="remark-text">
<div
ref="textBox"
class="text"
:style="{ WebkitLineClamp: minLine ? minLine : 3 }"
:class="{ 'all-text': showAll }"
>
<span
class="btn"
:class="{ all: showAll }"
@click="showAll = !showAll"
v-show="showBtn"
></span>
<span ref="text" v-if="type === 'html'" v-html="text"></span>
<span ref="text" v-else>{{ text }}</span>
</div>
</div>
</template>
<script>
const blh = document.body.clientHeight / 1080;
export default {
name: 'RemarkText',
data() {
return {
showAll: false,
showBtn: false,
};
},
watch: {
text() {
this.$nextTick(() => {
let textBoxH = this.$refs.textBox.offsetHeight;
let textH = this.$refs.text.offsetHeight;
if (textH - textBoxH > 16 * blh) {
// 超出高度则展示 按钮
this.showBtn = true;
}
});
},
},
props: ['text', 'minLine', 'type'],
};
</script>
<style scoped lang="less">
.remark-text {
display: flex;
margin-bottom: 10px;
.text {
width: 100%;
color: #222;
font-size: 16px;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-indent: 32px;
&.all-text {
-webkit-line-clamp: 999 !important;
}
.btn {
float: right;
clear: both;
margin-right: 8px;
color: @key-color;
text-indent: 0;
cursor: pointer;
&::after {
content: '展开';
}
&.all::after {
content: '收起';
}
}
&::before {
content: '';
float: right;
width: 0;
height: 100%;
margin-bottom: -20px;
}
}
}
</style>
使用
<remark-text :text="desc" />
<remark-text :text="liveDesc" type="html" :minLine="4"/>