feat(drawer): add service model (#27)

* feat(drawer): add service model

* docs(drawer): add service model demo

* fix(drawer): remove 'console.log()'

Author: lnzhangsong

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
   }
 }

packages/devui-vue/devui/drawer/src/drawer-service.ts

@@ -0,0 +1,33 @@
+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 {
+    this.drawer?.unmount();
+    this.drawer = null;
+    if (this.$div) {
+      this.$body.removeChild(this.$div)
+    }
+    this.$div = null
+  }
+
+
+}

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) {

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 |