<template>
  <!-- 此處為最外層盒子需要開啟彈性盒子，用于后續(xù)偽元素的高度計(jì)算 -->
  <div class="box">
    <!-- 此處為文本區(qū)域，類名text多行文本溢出顯示省略號，變量btnFlag控制要顯示的行數(shù) -->
    <div
      ref="textRef"
      :class="['text-cont', btnFlag ? 'text-unfold' : 'text-collapse']"
    >
      <!-- 此處為按鈕區(qū)域，類名unfold-and-collapse控制浮動實(shí)現(xiàn)文字包裹按鈕，事件控制btnFlag及按鈕文字的變化 -->
      <div class="unfold-and-collapse" @click="btnFlagChange">
        {{ !btnFlag ? "展開" : "收起" }}
      </div>
      <!-- 首行縮進(jìn)句尾不可控，使用&emsp;用于頂位 -->
      &emsp;&emsp;{{ 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({
  // 文本內(nèi)容
  text: "我們可以度過美好時光，也可以虛度光陰，但我希望你活得精彩。我希望你能看到令你驚嘆的事物，我希望你遇見具有不同觀點(diǎn)的人，我希望你的一生能讓自己過得自豪。如果你發(fā)現(xiàn)你的生活并非如此，我希望你能有勇氣重新來過。 你是獨(dú)特的，但你必須向統(tǒng)一讓步；你是自由的，但你必須向禁忌妥協(xié)。因?yàn)槟憧释H近群體，渴望他們的接受。你害怕被群體驅(qū)逐。因而你是孤獨(dú)的，你是獨(dú)特但孤獨(dú)的心魂。生來如此。生，就是這樣，永遠(yuǎn)都是這樣。",
  // 展開收起狀態(tài)
  btnFlag: false,
});
const textRef = ref();
// 展開收起事件
const btnFlagChange = () => {
  data.btnFlag = !data.btnFlag;
};
const { text, btnFlag } = toRefs(data);
</script>
<style scoped lang="scss">
// 最外層開啟彈性盒子，用于偽元素的高度計(jì)算
.box {
  display: flex;
}
// 文本區(qū)域設(shè)置寬度，顯示省略號
.text-cont {
  width: 300px;
  margin: 20px auto 0;
  display: -webkit-box;
  /* 必須結(jié)合的屬性 ，設(shè)置或檢索伸縮盒對象的子元素的排列方式 。*/
  -webkit-box-orient: vertical;
  /* 溢出部分隱藏 */
  overflow: hidden;
  // 首行縮進(jìn)
  // text-indent: 2em;
  // 文字居左
  text-align: left;
}
/*text-unfold與text-collapse控制要顯示的行數(shù)*/
.text-unfold {
  /*要顯示的行數(shù)*/
  -webkit-line-clamp: 9999;
}
.text-collapse {
  /*要顯示的行數(shù)*/
  -webkit-line-clamp: 3;
}
// 浮動實(shí)現(xiàn)文字包裹按鈕
.unfold-and-collapse {
  color: #19aaff;
  float: right;
  clear: both;
  margin-right: 10px;
}
// 偽元素用于實(shí)現(xiàn)文字包裹按鈕
.text-cont::before {
  content: "";
  float: right;
  width: 0;
  height: calc(100% - 20px);
  // background: red;
}
</style>