代码如下：

<template>
  <div class="app-container">
    <el-timeline style="max-width: 1000px">
      <el-timeline-item
        v-for="item in list"
        :key="item.su_Id"
        :timestamp="dayjs(item.su_InsertTime).format('YYYY-MM-DD')"
        placement="top"
      >
        <el-card>
          <h4 v-show="false">Update Github template</h4>
          <div class="content-container">
            <div
              ref="contentRef"
              class="content"
              :class="{ collapsed: item.isCollapsed && item.isOverflowing }"
            >
              <p v-html="item.su_Content"></p>
            </div>

            <div
              v-if="item.isOverflowing"
              class="fade-effect"
              :class="{ hidden: !item.isCollapsed }"
            ></div>

            <div class="button-container" v-if="item.isOverflowing">
              <el-button text @click="toggleCollapse(item)" type="warning">
                {{ item.isCollapsed ? "展开全部" : "收起" }}
              </el-button>
            </div>
          </div>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
import apiService from "@/api/ApiService";
import dayjs from "dayjs";
import { defineComponent, reactive, toRefs, onMounted, nextTick } from "vue";

export default defineComponent({
  name: "suggestionShare",
  setup() {
    const state = reactive({
      list: [],
      queryForm: {
        startIndex: 1,
        pageSize: 10,
      },
    });

    const checkOverflow = (item, el) => {
      if (el) {
        item.isOverflowing = el.scrollHeight > 200;
      }
    };

    const toggleCollapse = (item) => {
      item.isCollapsed = !item.isCollapsed;
    };

    const queryData = () => {
      state.queryForm.startIndex = 1;
      fetchData();
    };

    const fetchData = async () => {
      state.listLoading = true;
      try {
        const res = await apiService.getList(
          "/suggestion/get",
          state.queryForm
        );
        state.list = res.data.data.map((item) => ({
          ...item,
          isCollapsed: true,
          isOverflowing: false,
        }));

        if (state.queryForm.startIndex == 1) state.total = res.data.total;

        // 等待DOM更新后检查内容是否溢出
        nextTick(() => {
          const contentElements = document.querySelectorAll(".content");
          contentElements.forEach((el, index) => {
            if (index < state.list.length) {
              checkOverflow(state.list[index], el);
            }
          });
        });
      } catch (err) {
        await apiService.logError({
          e_Source: "Vue-API",
          e_TargetSite: "win/suggestionList",
          e_StackTrace: "fetchData",
          e_Message: err.message,
        });
      } finally {
        state.listLoading = false;
      }
    };

    onMounted(() => {
      fetchData();
    });

    return {
      ...toRefs(state),
      queryData,
      fetchData,
      dayjs,
      toggleCollapse,
    };
  },
});
</script>

<style scoped>
.content-container {
  position: relative;
}

.content {
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.content.collapsed {
  max-height: 200px;
}

.fade-effect {
  position: absolute;
  bottom: 40px; /* 调整按钮容器高度 */
  left: 0;
  right: 0;
  height: 30px;
  background: linear-gradient(to bottom, transparent, white);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.fade-effect.hidden {
  opacity: 0;
}

.button-container {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  width: 100%;
}

/* 可以移除原来的 .toggle-button 样式，因为我们使用 el-button 组件 */
</style>

• 本文标题： Vue如何实现内容超出高度，显示展开按钮展示全文
• 文章分类：【VueJS】
• 非特殊说明，本文版权归【胡同里的砖头】个人博客 所有，转载请注明出处.

• 上一篇：WPF写本地日志
• 下一篇： table表格动态筛选列显示