|
<template>
<!-- 此处为最外层盒子需要开启弹性盒子，用于后续伪元素的高度计算 -->
<div class="box">
<!-- 此处为文本区域，类名text多行文本溢出显示省略号，变量btnFlag控制要显示的行数 -->
<div
ref="textRef"
:class="['text-cont', btnFlag ? 'text-unfold' : 'text-collapse']"
>
<!-- 此处为按钮区域，类名unfold-and-collapse控制浮动实现文字包裹按钮，事件控制btnFlag及按钮文字的变化 -->
<div class="unfold-and-collapse" @click="btnFlagChange">
{{ !btnFlag ? "展开" : "收起" }}
</div>
<!-- 首行缩进句尾不可控，使用 用于顶位 -->
  {{ text }}
</div>
</div>
</template>
<script setup>
import { ref, reactive, toRefs, watch, computed, defineProps } from "vue";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const store = useStore();
const data = reactive({
// 文本内容
text: "我们可以度过美好时光，也可以虚度光阴，但我希望你活得精彩。我希望你能看到令你惊叹的事物，我希望你遇见具有不同观点的人，我希望你的一生能让自己过得自豪。如果你发现你的生活并非如此，我希望你能有勇气重新来过。 你是独特的，但你必须向统一让步；你是自由的，但你必须向禁忌妥协。因为你渴望亲近群体，渴望他们的接受。你害怕被群体驱逐。因而你是孤独的，你是独特但孤独的心魂。生来如此。生，就是这样，永远都是这样。",
// 展开收起状态
btnFlag: false,
});
const textRef = ref();
// 展开收起事件
const btnFlagChange = () => {
data.btnFlag = !data.btnFlag;
};
const { text, btnFlag } = toRefs(data);
</script>
<style scoped lang="scss">
// 最外层开启弹性盒子，用于伪元素的高度计算
.box {
display: flex;
}
// 文本区域设置宽度，显示省略号
.text-cont {
width: 300px;
margin: 20px auto 0;
display: -webkit-box;
/* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
-webkit-box-orient: vertical;
/* 溢出部分隐藏 */
overflow: hidden;
// 首行缩进
// text-indent: 2em;
// 文字居左
text-align: left;
}
/*text-unfold与text-collapse控制要显示的行数*/
.text-unfold {
/*要显示的行数*/
-webkit-line-clamp: 9999;
}
.text-collapse {
/*要显示的行数*/
-webkit-line-clamp: 3;
}
// 浮动实现文字包裹按钮
.unfold-and-collapse {
color: #19aaff;
float: right;
clear: both;
margin-right: 10px;
}
// 伪元素用于实现文字包裹按钮
.text-cont::before {
content: "";
float: right;
width: 0;
height: calc(100% - 20px);
// background: red;
}
</style>
|
