BasicDrawer 抽屉

对antv的 drawer 组件进行封装，扩展拖拽，全屏，自适应高度等功能。 代码路径 src/components/Drawer

基本用法

由于 drawer 内部代码一般独立成单独文件，推荐独立成组件来进行开发，所以示例都是以独立的文件来进行说明 独立组件代码，用于写组件内部的内容 DrawerComponent1.vue

<template>
  <BasicDrawer v-bind="$attrs" title="我是模态框标题" :helpMessage="['提示1', '提示2']">
    内容区
  </BasicDrawer>
</template>
<script setup>
  import { BasicDrawer } from '/@/components/Drawer';
</script>

页面引用弹窗 xxPage.vue

<template>
  <PageWrapper>
    <a-button @click="handleClick">打开</a-button>
    <DrawerDemo @register="register" />
  </PageWrapper>
</template>
<script setup>
  import DrawerDemo from './DrawerDemo.vue';
  import { useDrawer } from '/@/components/Drawer';
  const [register, { openDrawer }] = useDrawer();
  const handleClick = () => {
    openDrawer();
  };
</script>

参数传递

外部引用页面可以通过openDrawer进行参数传递 xxPage.vue

<template>
  <PageWrapper>
    <a-button @click="handleClick">打开</a-button>
    <DrawerDemo @register="register" />
  </PageWrapper>
</template>
<script setup>
  import DrawerDemo from './DrawerDemo.vue';
  import { useDrawer } from '/@/components/Drawer';
  const [register, { openDrawer }] = useDrawer();
  const handleClick = () => {
    // 传参
    openDrawer(true, {
      id: '1',
    });
  };
</script>

抽屉文件可以通过回调函数进行接收 DrawerComponent2.vue

<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="register"
    title="我是模态框标题"
    :helpMessage="['提示1', '提示2']"
  >
    内容区
  </BasicDrawer>
</template>
<script setup>
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  const [register] = useDrawerInner((data) => {
    // 接收参数
    console.log(data);
  });
</script>