feat(components): [drawer] enable open event (#1527)

* feat(drawer): enable open event

* docs(drawer): enable open event

* perf(drawer): enable open event

* style(drawer): enable open event

* perf(drawer): enable open event

* perf(drawer): enable open event

examples/sites/demos/apis/drawer.js

@@ -182,9 +182,21 @@ export default {
         }
       ],
       events: [
+        {
+          name: 'open',
+          type: '() => void',
+          defaultValue: '',
+          desc: {
+            'zh-CN': '打开抽屉事件',
+            'en-US': ''
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'open-event',
+          mfDemo: ''
+        },
         {
           name: 'close',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '关闭抽屉事件',
@@ -196,7 +208,7 @@ export default {
         },
         {
           name: 'confirm',
-          type: '()=> void',
+          type: '() => void',
           defaultValue: '',
           desc: {
             'zh-CN': '确认事件，设置 :show-footer="true" 时有效',

examples/sites/demos/pc/app/drawer/open-event-composition-api.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <tiny-button @click="fn" type="primary"> 打开事件示例 </tiny-button>
+    <tiny-drawer title="标题" :show-footer="true" :visible="visible" @update:visible="visible = $event" @open="open">
+      <div style="height: 200px; text-align: center">
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
+    </tiny-drawer>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Drawer as TinyDrawer, Button as TinyButton, Modal } from '@opentiny/vue'
+
+const visible = ref(false)
+
+function fn() {
+  visible.value = true
+}
+
+function open() {
+  Modal.message('打开事件')
+}
+</script>

examples/sites/demos/pc/app/drawer/open-event.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('打开事件', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+  await page.goto('drawer#open-event')
+
+  const message = page.locator('.tiny-modal.type__message').filter({ hasText: '打开事件' }).first()
+
+  await page.getByRole('button', { name: '打开事件示例' }).click()
+  await expect(message).toBeVisible()
+})

examples/sites/demos/pc/app/drawer/open-event.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <tiny-button @click="fn" type="primary"> 打开事件示例 </tiny-button>
+    <tiny-drawer title="标题" :show-footer="true" :visible="visible" @update:visible="visible = $event" @open="open">
+      <div style="height: 200px; text-align: center">
+        <br />
+        <br />
+        <span>内容区域</span>
+      </div>
+    </tiny-drawer>
+  </div>
+</template>
+
+<script>
+import { Drawer, Button, Modal } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDrawer: Drawer,
+    TinyButton: Button
+  },
+  data() {
+    return {
+      visible: false
+    }
+  },
+  methods: {
+    fn() {
+      this.visible = true
+    },
+    open() {
+      Modal.message('打开事件')
+    }
+  }
+}
+</script>

examples/sites/demos/pc/app/drawer/webdoc/drawer.js

@@ -186,6 +186,18 @@ export default {
       },
       codeFiles: ['footer-slot.vue']
     },
+    {
+      demoId: 'open-event',
+      name: {
+        'zh-CN': '打开事件',
+        'en-US': ''
+      },
+      desc: {
+        'zh-CN': '<p>打开抽屉事件。</p>',
+        'en-US': ''
+      },
+      codeFiles: ['open-event.vue']
+    },
     {
       demoId: 'close-event',
       name: {

packages/renderless/src/drawer/index.ts

@@ -38,6 +38,7 @@ export const watchToggle =
   (bool: boolean) => {
     setTimeout(() => {
       emit('update:visible', bool)
+      bool && emit('open')
     }, 0)
   }
 

packages/vue/src/drawer/src/pc.vue

@@ -144,6 +144,7 @@ export default defineComponent({
     'beforeClose',
     'tipsProps'
   ],
+  emits: ['update:visible', 'open', 'close', 'confirm'],
   setup(props, context) {
     return setup({ props, context, renderless, api })
   }