2024-09-24

<template>
<div class="text-clamp">
<div class="text" :style="{ height }">

<span class="btn"
>详情<van-icon name="arrow" color="rgba(0, 0, 0, 0.4)" />
</span>
<div ref="textRef" :style="commonStyle" class="content_style">
<slot />
</div>
</div>
</div>
</template>

<script>
import { Icon } from "vant";
export default {
name: "TextClamp",
components: {
"van-icon": Icon,
},
props: {
fontSize: {
type: Number,
default: 12,
},
lines: {
type: Number,
default: 2,
},
lineHeight: {
type: Number,
default: 18,
},
selectors: {
type: String,
default: "",
},
},
data() {
return {
isExpand: false,
isVisible: true,
textHeight: 0,
};
},
computed: {
height() {
if (this.isExpand) {
return this.refs.textRef.clientHeight + "px"; } else { return Math.min(this.lines * this.lineHeight, this.textHeight) + "px"; } }, commonStyle() { return { lineHeight: this.lineHeight + "px", fontSize: this.fontSize + "px", height: "36px", }; }, }, mounted() { this.init(); // 监听插槽变化 const observer = new MutationObserver((mutations) => { mutations.forEach((mutation) => { if (mutation.type === "characterData") { this.init(); } }); }); observer.observe(this.refs.textRef, {
characterData: true,
subtree: true,
childList: true,
});
},
methods: {
init() {
this.isExpand = false;
this.textHeight =
(this.refs && this.refs.textRef && this.$refs.textRef.clientHeight) ||
0;
// this.isVisible = this.textHeight > this.lines * this.lineHeight;
},
toggle() {
this.isExpand = !this.isExpand;
if (!this.isExpand && this.selectors) {
const initEl = document.querySelector(this.selectors);
setTimeout(() => {
initEl.scrollIntoView({
behavior: "smooth",
block: "start",
inline: "center",
});
}, 97);
}
},
},
};
</script>

<style lang="scss" scoped>
.text-clamp {
display: flex;
overflow: hidden;
}
.text {
font-size: 20px;
transition: 0.3s height;
.content_style {
height: 36px;
color: rgba(0, 0, 0, 0.6);
font-family: "PingFang SC";
overflow: hidden;
　　text-overflow: ellipsis;
　　display: -webkit-box;
　　-webkit-box-align: start; //让内容居左
　　-webkit-box-orient: vertical;
　　-webkit-line-clamp: 2;
}
}
.text::before {
content: "";
height: calc(100% - 20px);
float: right;
}
.btn {
float: right;
clear: both;
font-size: 12px;
padding: 4px 6px;
border-radius: 2px;
color: #2590ff;
cursor: pointer;
}
</style>

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容