From 046fa846e61e6303d9dffcf0e5199401bccd9780 Mon Sep 17 00:00:00 2001
From: Bang <15622356989@163.com>
Date: Tue, 26 Jul 2022 15:07:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Edrawer=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/.vitepress/src/views/TheDemo.vue | 17 +++++++++++++++++
 opendesign/drawer/ODrawer.vue        | 23 +++++++++++++++++++++++
 opendesign/drawer/index.ts           |  9 +++++++++
 opendesign/index.ts                  |  2 ++
 4 files changed, 51 insertions(+)
 create mode 100644 opendesign/drawer/ODrawer.vue
 create mode 100644 opendesign/drawer/index.ts

diff --git a/app/.vitepress/src/views/TheDemo.vue b/app/.vitepress/src/views/TheDemo.vue
index deb84b448..769ddccca 100644
--- a/app/.vitepress/src/views/TheDemo.vue
+++ b/app/.vitepress/src/views/TheDemo.vue
@@ -83,6 +83,11 @@ const tagClick = (i: number) => {
   activeIndex.value = i;
 };
 // tagFiter end
+
+const isDrawerOpen = ref(false);
+const toggleDrawer = () => {
+  isDrawerOpen.value = !isDrawerOpen.value;
+};
 onMounted(() => {
   // getMeetingData().then((res: MeetingData) => {
   //   calendarData.value = res.tableData;
@@ -119,6 +124,18 @@ onMounted(() => {
       </div>
     </div>
 
+    <div class="demo-box">
+      <h4>ODrawer</h4>
+      <OButton type="primary" @click="toggleDrawer">toggle drawer</OButton>
+      <ODrawer
+        v-model="isDrawerOpen"
+        direction="btt"
+        :show-close="false"
+        custom-class="o-drawer"
+      >
+      </ODrawer>
+    </div>
+
     <div class="demo-box">
       <h4>OSearch</h4>
       <OSearch v-model="inputName"></OSearch>
diff --git a/opendesign/drawer/ODrawer.vue b/opendesign/drawer/ODrawer.vue
new file mode 100644
index 000000000..e8be2e6a6
--- /dev/null
+++ b/opendesign/drawer/ODrawer.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { computed, useAttrs } from 'vue';
+
+const attrs = useAttrs();
+
+const classNames = computed(() => {
+  return `${attrs['custom-class']} o-drawer`;
+});
+</script>
+
+<template>
+  <ElDrawer v-bind="attrs" :custom-class="classNames">
+    <template #header>
+      <slot name="header"></slot>
+    </template>
+
+    <slot></slot>
+
+    <template #footer>
+      <slot name="footer"></slot>
+    </template>
+  </ElDrawer>
+</template>
diff --git a/opendesign/drawer/index.ts b/opendesign/drawer/index.ts
new file mode 100644
index 000000000..a42705684
--- /dev/null
+++ b/opendesign/drawer/index.ts
@@ -0,0 +1,9 @@
+import type { App } from 'vue';
+import Drawer from './ODrawer.vue';
+Drawer.install = function (app: App) {
+  app.component('OTable', Drawer);
+};
+Drawer.install = function (app: App) {
+  app.component('ODrawer', Drawer);
+};
+export { Drawer };
diff --git a/opendesign/index.ts b/opendesign/index.ts
index 15ebeac85..31a3bc239 100644
--- a/opendesign/index.ts
+++ b/opendesign/index.ts
@@ -14,6 +14,7 @@ import { Pagination } from './pagination';
 import { Table, TableColumn } from './table';
 import { Timeline } from './timeline';
 import { Search } from './search';
+import { Drawer } from './drawer';
 
 const components = [
   Button,
@@ -32,6 +33,7 @@ const components = [
   TabPane,
   Tree,
   Search,
+  Drawer,
 ];
 export default {
   install(app: App): void {
-- 
Gitee