first commit

2026-04-09 15:09:34 +08:00
commit d8e3a63df1
2246 changed files with 352109 additions and 0 deletions
@@ -0,0 +1,69 @@
+<template>
+  <PageWrapper title="抽屉组件使用示例">
+    <Alert message="使用 useDrawer 进行抽屉操作" show-icon />
+    <a-button type="primary" class="my-4" @click="openDrawerLoading"> 打开Drawer </a-button>
+
+    <Alert message="内外同时控制显示隐藏" show-icon />
+    <a-button type="primary" class="my-4" @click="openDrawer2(true)"> 打开Drawer </a-button>
+    <Alert message="自适应高度/显示footer" show-icon />
+    <a-button type="primary" class="my-4" @click="openDrawer3(true)"> 打开Drawer </a-button>
+
+    <Alert message="内外数据交互" show-icon />
+    <a-button type="primary" class="my-4" @click="send"> 打开Drawer并传递数据 </a-button>
+    <Alert message="详情页模式" show-icon />
+    <a-button type="primary" class="my-4" @click="openDrawer5(true)"> 打开详情Drawer </a-button>
+    <Drawer1 @register="register1" />
+    <Drawer2 @register="register2" />
+    <Drawer3 @register="register3" />
+    <Drawer4 @register="register4" />
+    <Drawer5 @register="register5" />
+  </PageWrapper>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { Alert } from 'ant-design-vue';
+  import { useDrawer } from '/@/components/Drawer';
+  import Drawer1 from './Drawer1.vue';
+  import Drawer2 from './Drawer2.vue';
+  import Drawer3 from './Drawer3.vue';
+  import Drawer4 from './Drawer4.vue';
+  import Drawer5 from './Drawer5.vue';
+  import { PageWrapper } from '/@/components/Page';
+
+  export default defineComponent({
+    components: { Alert, PageWrapper, Drawer1, Drawer2, Drawer3, Drawer4, Drawer5 },
+    setup() {
+      const [register1, { openDrawer: openDrawer1, setDrawerProps }] = useDrawer();
+      const [register2, { openDrawer: openDrawer2 }] = useDrawer();
+      const [register3, { openDrawer: openDrawer3 }] = useDrawer();
+      const [register4, { openDrawer: openDrawer4 }] = useDrawer();
+      const [register5, { openDrawer: openDrawer5 }] = useDrawer();
+      function send() {
+        openDrawer4(true, {
+          data: 'content',
+          info: 'Info',
+        });
+      }
+      function openDrawerLoading() {
+        openDrawer1();
+        setDrawerProps({ loading: true });
+        setTimeout(() => {
+          setDrawerProps({ loading: false });
+        }, 2000);
+      }
+      return {
+        register1,
+        openDrawer1,
+        register2,
+        openDrawer2,
+        register3,
+        openDrawer3,
+        register4,
+        register5,
+        openDrawer5,
+        send,
+        openDrawerLoading,
+      };
+    },
+  });
+</script>