fix(drawer): [drawer] modify problem (#2460)

opentiny · Oct 29, 2024 · f6f512f · f6f512f
1 parent 9acc34e
commit f6f512f
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 13 deletions.
diff --git a/examples/sites/demos/pc/app/drawer/use-through-method-composition-api.vue b/examples/sites/demos/pc/app/drawer/use-through-method-composition-api.vue
@@ -6,7 +6,7 @@
 
 <script lang="tsx" setup>
 import { ref } from 'vue'
-import { TinyDrawer, TinyButton } from '@opentiny/vue'
+import { TinyDrawer, TinyButton, Notify } from '@opentiny/vue'
 import { iconHelp } from '@opentiny/vue-icon'
 
 let drawerInstance = null
@@ -24,15 +24,26 @@ const config = ref({
   showFooter: true,
   // 通过 events 监听事件
   events: {
-    open: (instance) => console.log('open 事件', instance),
-    close: () => console.log('close 事件')
+    open: (instance) =>
+      Notify({
+        type: 'info',
+        title: 'open 事件',
+        message: `${instance.title}`,
+        position: 'top-right'
+      }),
+    close: () =>
+      Notify({
+        type: 'info',
+        title: 'close 事件',
+        position: 'top-right'
+      })
   },
   // 通过属性 customSlots 设置插槽, 插槽内容可以是 string | VNode | ({h, $drawer}) => VNode
   customSlots: {
     // 使用 h 函数
     default: (h) => h('p', { class: '' }, '抽屉主体内容。'),
     // 返回 VNode 节点的方法, 可通过参数中 $drawer 访问到组件实例
-    headerRight: () => <IconHelp></IconHelp>,
+    headerRight: () => <IconHelp style="width:20px;height:20px"></IconHelp>,
     // 直接赋值 VNode
     footer: (
       <TinyButton type="primary" onClick={closeDrawer}>

diff --git a/examples/sites/demos/pc/app/drawer/use-through-method.vue b/examples/sites/demos/pc/app/drawer/use-through-method.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="tsx">
-import { TinyDrawer, TinyButton } from '@opentiny/vue'
+import { TinyDrawer, TinyButton, Notify } from '@opentiny/vue'
 import { iconHelp } from '@opentiny/vue-icon'
 
 export default {
@@ -18,6 +18,9 @@ export default {
     }
   },
   methods: {
+    closeDrawer() {
+      this.drawerInstance.close()
+    },
     showDrawer() {
       const IconHelp = iconHelp()
       const config = {
@@ -27,27 +30,35 @@ export default {
         showFooter: true,
         // 通过 events 监听事件
         events: {
-          open: (instance) => console.log('open 事件', instance),
-          close: () => console.log('close 事件')
+          open: (instance) =>
+            Notify({
+              type: 'info',
+              title: 'open 事件',
+              message: `${instance.title}`,
+              position: 'top-right'
+            }),
+          close: () =>
+            Notify({
+              type: 'info',
+              title: 'close 事件',
+              position: 'top-right'
+            })
         },
         // 通过属性 customSlots 设置插槽, 插槽内容可以是 string | VNode | ({h, $drawer}) => VNode
         customSlots: {
           // 使用 h 函数
           default: (h) => h('p', { class: '' }, '抽屉主体内容。'),
           // 返回 VNode 节点的方法, 可通过参数中 $drawer 访问到组件实例
-          headerRight: () => <IconHelp></IconHelp>,
+          headerRight: () => <IconHelp style="width:20px;height:20px"></IconHelp>,
           // 直接赋值 VNode
           footer: (
-            <Button type="primary" onClick={this.closeDrawer}>
+            <TinyButton type="primary" onClick={this.closeDrawer}>
               点击关闭
-            </Button>
+            </TinyButton>
           )
         }
       }
       this.drawerInstance = TinyDrawer.service(config)
-    },
-    closeDrawer() {
-      this.drawerInstance.close()
     }
   }
 }