From 2c85e5c48b924782399f36bb4c43fb3b8b1734fd Mon Sep 17 00:00:00 2001
From: lnzhangsong <lnzhangsong@163.com>
Date: Fri, 17 Dec 2021 09:13:20 +0800
Subject: [PATCH 1/3] feat(drawer): add service model

---
 packages/devui-vue/devui/drawer/index.ts      |  7 ++--
 .../devui/drawer/src/drawer-service.ts        | 34 +++++++++++++++++++
 .../devui-vue/devui/drawer/src/drawer.tsx     |  3 ++
 3 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 packages/devui-vue/devui/drawer/src/drawer-service.ts

diff --git a/packages/devui-vue/devui/drawer/index.ts b/packages/devui-vue/devui/drawer/index.ts
index 2ad72eb001..0c923f4da8 100644
--- a/packages/devui-vue/devui/drawer/index.ts
+++ b/packages/devui-vue/devui/drawer/index.ts
@@ -1,18 +1,19 @@
 import type { App } from 'vue'
 import Drawer from './src/drawer'
+import DrawerService from './src/drawer-service'
 
 Drawer.install = function(app: App): void {
   app.component(Drawer.name, Drawer)
 }
 
-export { Drawer }
+export { Drawer, DrawerService }
 
 export default {
   title: 'Drawer 抽屉板',
   category: '反馈',
-  status: '50%',
+  status: '60%',
   install(app: App): void {
-    
     app.use(Drawer as any)
+    app.config.globalProperties.$drawerService = DrawerService
   }
 }
diff --git a/packages/devui-vue/devui/drawer/src/drawer-service.ts b/packages/devui-vue/devui/drawer/src/drawer-service.ts
new file mode 100644
index 0000000000..36d2d63c1e
--- /dev/null
+++ b/packages/devui-vue/devui/drawer/src/drawer-service.ts
@@ -0,0 +1,34 @@
+import { createApp } from 'vue'
+import { DrawerProps } from './drawer-types'
+import Drawer from './drawer'
+
+
+function createDrawerApp(props: DrawerProps) {
+  return createApp(Drawer, { ...props })
+}
+
+export default class DrawerService {
+
+  static $body: HTMLElement | null = document.body
+  static $div: HTMLDivElement | null = null
+  static drawer = null;
+
+  static show(props: DrawerProps): void{
+    this.$div = document.createElement('div')
+    this.$body.appendChild(this.$div)
+    this.drawer = createDrawerApp(props)
+    this.drawer.mount(this.$div)
+  }
+
+  static hide(): void {
+    console.log(this.drawer);
+    this.drawer?.unmount();
+    this.drawer = null;
+    if (this.$div) {
+      this.$body.removeChild(this.$div)
+    }
+    this.$div = null
+  }
+
+
+}
\ No newline at end of file
diff --git a/packages/devui-vue/devui/drawer/src/drawer.tsx b/packages/devui-vue/devui/drawer/src/drawer.tsx
index 09c84e4d9a..418fe5f30a 100644
--- a/packages/devui-vue/devui/drawer/src/drawer.tsx
+++ b/packages/devui-vue/devui/drawer/src/drawer.tsx
@@ -5,6 +5,8 @@ import DrawerHeader from './components/drawer-header'
 import DrawerContainer from './components/drawer-container'
 import DrawerBody from './components/drawer-body'
 
+import DrawerService from './drawer-service';
+
 export default defineComponent({
   name: 'DDrawer',
   props: drawerProps,
@@ -21,6 +23,7 @@ export default defineComponent({
     }
 
     const closeDrawer = async () => {
+      DrawerService.hide()
       const beforeHidden = props.beforeHidden;
       let result = (typeof beforeHidden === 'function' ? beforeHidden(): beforeHidden) ?? false;
       if (result instanceof Promise) {

From 31f0f4915177410fc0836b99c1f6dc23156037a1 Mon Sep 17 00:00:00 2001
From: lnzhangsong <lnzhangsong@163.com>
Date: Fri, 17 Dec 2021 09:14:26 +0800
Subject: [PATCH 2/3] docs(drawer): add service model demo

---
 .../devui-vue/docs/components/drawer/index.md | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/packages/devui-vue/docs/components/drawer/index.md b/packages/devui-vue/docs/components/drawer/index.md
index 7e838ddabc..1b6bf592d2 100644
--- a/packages/devui-vue/docs/components/drawer/index.md
+++ b/packages/devui-vue/docs/components/drawer/index.md
@@ -127,6 +127,35 @@ export default ({
 
 :::
 
+### 以服务的方式调用
+
+:::demo
+
+```vue
+<template>
+<d-button @click="open()">click me</d-button>
+</template>
+<script>
+import { defineComponent, ref, h } from 'vue'
+export default defineComponent({
+  setup(props, ctx) {
+    const results =  ref(null);
+    function open() {
+      this.$drawerService.show({
+        visible: true,
+        isCover: false,
+      });
+    }
+    return {
+      open,
+    }
+  }
+})
+</script>
+```
+
+:::
+
 ### 参数及API
 
 | 参数 | 类型 | 默认 | 说明 | 跳转 Demo |

From 548a0c509f42d6d5f652236b55f2a944dfce3f7f Mon Sep 17 00:00:00 2001
From: lnzhangsong <lnzhangsong@163.com>
Date: Sat, 18 Dec 2021 17:53:12 +0800
Subject: [PATCH 3/3] fix(drawer): remove 'console.log()'

---
 packages/devui-vue/devui/drawer/src/drawer-service.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/devui-vue/devui/drawer/src/drawer-service.ts b/packages/devui-vue/devui/drawer/src/drawer-service.ts
index 36d2d63c1e..597621d7d2 100644
--- a/packages/devui-vue/devui/drawer/src/drawer-service.ts
+++ b/packages/devui-vue/devui/drawer/src/drawer-service.ts
@@ -21,7 +21,6 @@ export default class DrawerService {
   }
 
   static hide(): void {
-    console.log(this.drawer);
     this.drawer?.unmount();
     this.drawer = null;
     if (this.$div) {