box展开/收起

实现，box，展开/收起功能。 效果图

<template>
  <div class="reason-for-rejection">
    <div class="reason-for-rejection-title">驳回原因</div>
    <div class="reason-for-rejection-main">
      <div
        id="reasonForRejectionMainId"
        class="reason-for-rejection-main-conent"
      >
        {{ options.blockReject }}
      </div>
      <div
        v-if="isShowExpandedBtn"
        class="reason-for-rejection-main-btn"
        @click="handleOpen"
      >
        {{ isExpanded ? "展开" : "收起" }}
        <div
          class="main-btn"
          :class="[isExpanded ? 'btn__expanded' : 'btn__no-expanded']"
        ></div>
      </div>
    </div>
  </div>
</template

data() {
    defaults(this.options, defaultOptions);
    return {
      btnText: "展开",
      isExpanded: true, // 是否展示展开按钮
      isShowExpandedBtn: false, // 是否展示 展开/收起 按钮
    };
  },
  methods: {
    handleOpen() {
      const textContent =
        document.getElementById("reasonForRejectionMainId") || "";
      if (textContent) {
        // 检查类名中是否存在 该类名
        const isExpanded = textContent.classList.contains(
          "reason-for-rejection-main__expanded"
        );
        // 添加或删除 类名，
        textContent.classList.toggle(
          "reason-for-rejection-main__expanded",
          !isExpanded
        ); // 切换展开/收起状态
        this.isExpanded = !isExpanded;
      } else {
        this.isExpanded = false;
      }
    },
  },
  mounted() {
    const mainBox = document.getElementById("reasonForRejectionMainId") || "";
    if (mainBox) {
      this.isShowExpandedBtn = mainBox.scrollHeight > mainBox.clientHeight;
    } else {
      this.isShowExpandedBtn = false;
    }
  },

.reason-for-rejection {
  margin: 0 40px;
  padding: 16px 24px;
  border-radius: 8px;
  border: 1px solid #f33b50;
  background: #fdeaea;
  .reason-for-rejection-title {
    margin-bottom: 8px;
    color: #ed2828;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
  }
  .reason-for-rejection-main {
    .reason-for-rejection-main-conent {
      line-height: 22px;
      font-size: 14px;
      color: red;
      max-height: 66px; /* 最大显示3行文本的高度 */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      transition: max-height 0.5s ease; /* 平滑过渡效果 */
      word-wrap: break-word; /* 允许长单词换行 */
      overflow-wrap: break-word; /* 允许长单词换行 */
      word-break: break-all; /* 允许在单词内断行 */
      white-space: normal; /* 正常处理空白字符 */
    }
    .reason-for-rejection-main-btn {
      margin-top: 4px;
      display: flex;
      align-items: center;
      cursor: pointer;
      font-size: 14px;
      color: #3768fa;
      font-weight: 400;
      line-height: 22px;
      .main-btn {
        width: 14px;
        height: 14px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .btn__expanded {
        background-image: url(https://img14.360buyimg.com/imagetools/jfs/t1/108731/19/51393/532/66c3527bF6fdee147/56c8aa7a2f16b9f9.png);
      }
      .btn__no-expanded {
        background-image: url(https://img13.360buyimg.com/imagetools/jfs/t1/10522/12/25696/526/66c3527bFe5a440fb/99f4c3f556e3a0ce.png);
      }
    }
    .reason-for-rejection-main__expanded {
      max-height: none; /* 展开时移除最大高度限制 */
    }
  }
}