使用 Vue 和 Ant Design 实现抽屉效果的模块折叠功能

最新推荐文章于 2024-06-26 15:42:20 发布

小陈同学，，

最新推荐文章于 2024-06-26 15:42:20 发布

阅读量422

点赞数 3

分类专栏： vue3.0 文章标签： vue.js javascript 前端 antdesign 折叠抽屉

本文链接：https://blog.csdn.net/ping_lvy/article/details/139638094

版权

vue3.0 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

功能描述：

有两个模块，点击上面模块的收起按钮时，上面的模块可以折叠，下面的模块随之扩展

代码实现：

我们在 Vue 组件中定义两个模块的布局和状态管理：

const scrollTableY = ref(560);  // 表格初始高度
const isRaFold = ref(false);    // 控制第一个模块折叠状态
const isQuFold = ref(true);     // 控制第二个模块显示状态

const items = ref([
  {
    x: 0,
    y: 0,
    w: 100,
    h: 26,
    key: 'rightTop',
    title: '分文信息',
    cardProps: {
      bodyStyle: {
        padding: '12px',
      },
    },
  },
  {
    x: 0,
    y: 26,
    w: 100,
    h: 74,
    key: 'rightBottom',
    title: '查询结果列表',
    cardProps: {
      bodyStyle: {
        padding: '12px',
      },
    },
  },
]);

const handleFoldClick = (type) => {
  if (type == 1) {
    isRaFold.value = !isRaFold.value;
    //调整第一个模块的高度
    items.value[type - 1].h = isRaFold.value ? 26 : 6;
    //调整第二个模块的位置和高度
    items.value[type].y = items.value[type - 1].h;
    items.value[type].h = 100 - items.value[type - 1].h;
  } else if (type == 2) {
    isQuFold.value = !isQuFold.value;
  }
//调整表格的高度
  scrollTableY.value = isRaFold.value ? 560 : 730;
};

接下来，在模板中使用 v-if 指令控制模块的显示

 <action-table
        v-if="isQuFold"
        :row-selection="{ type: 'check' }"
        id="left-table"
        :scroll="{ y: scrollTableY }"
        :isPagination="true"
        v-bind="gridConfig"
      ></action-table>