feat(vue-renderless/drawer): add close-on-press-escape api (#3900)

Author: IKEYCY

examples/sites/demos/apis/drawer.js

@@ -207,6 +207,20 @@ export default {
           mode: ['pc'],
           pcDemo: 'tips-props',
           hideSaas: true
+        },
+        {
+          name: 'close-on-press-escape',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': 'ESC 键关闭抽屉',
+            'en-US': 'ESC key to close drawer'
+          },
+          mode: ['pc'],
+          pcDemo: 'closeOnPressEscape',
+          meta: {
+            stable: '3.28.0'
+          }
         }
       ],
       events: [

examples/sites/demos/pc/app/drawer/close-on-press-escape-composition-api.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <tiny-button @click="openDrawer" type="primary"> 抽屉组件 </tiny-button>
+    <tiny-drawer
+      title="标题"
+      :visible="visible"
+      @update:visible="visible = $event"
+      @confirm="confirm"
+      :close-on-press-escape="true"
+    >
+      <div>内容区域</div>
+    </tiny-drawer>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
+
+const visible = ref(false)
+
+function openDrawer() {
+  visible.value = true
+}
+
+function confirm() {
+  visible.value = false
+}
+</script>

examples/sites/demos/pc/app/drawer/close-on-press-escape.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test'
+
+test('按 Esc 键关闭 Drawer（close-on-press-escape）', async ({ page }) => {
+  page.on('pageerror', (exception) => expect(exception).toBeNull())
+
+  await page.goto('drawer#close-on-press-escape')
+
+  const drawer = page.locator('.tiny-drawer__main')
+
+  // 打开 Drawer（用文本更稳定）
+  await page.getByText('抽屉组件').click()
+  await expect(drawer).toBeVisible()
+
+  // 按 Esc
+  await page.keyboard.press('Escape')
+
+  // Drawer 关闭
+  await expect(drawer).toBeHidden()
+})

examples/sites/demos/pc/app/drawer/close-on-press-escape.vue

@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <tiny-button @click="openDrawer" type="primary"> 抽屉组件 </tiny-button>
+    <tiny-drawer
+      title="标题"
+      :visible="visible"
+      @update:visible="visible = $event"
+      @confirm="confirm"
+      :close-on-press-escape="true"
+    >
+      <div>内容区域</div>
+    </tiny-drawer>
+  </div>
+</template>
+
+<script>
+import { TinyDrawer, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyDrawer,
+    TinyButton
+  },
+  data() {
+    return {
+      visible: false
+    }
+  },
+  methods: {
+    openDrawer() {
+      this.visible = true
+    },
+    confirm() {
+      this.visible = false
+    }
+  }
+}
+</script>

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

@@ -16,6 +16,18 @@ export default {
       },
       codeFiles: ['basic-usage.vue']
     },
+    {
+      demoId: 'close-on-press-escape',
+      name: {
+        'zh-CN': '按下 ESC 关闭抽屉',
+        'en-US': ''
+      },
+      desc: {
+        'zh-CN': '<p>添加 <code>close-on-press-escape</code> 属性可以控制是否可以通过 ESC 关闭抽屉。</p>',
+        'en-US': ''
+      },
+      codeFiles: ['close-on-press-escape.vue']
+    },
     {
       demoId: 'use-through-method',
       name: { 'zh-CN': '通过方法调用', 'en-US': 'Use through method' },

packages/renderless/src/drawer/index.ts

@@ -80,6 +80,36 @@ export const handleClose =
     }
   }
 
+/* ================= Esc 关闭（受控） ================= */
+export const keydown =
+  ({ api, state, props }: Pick<IDrawerRenderlessParams, 'api' | 'state' | 'props'>) =>
+  (event: KeyboardEvent) => {
+    if (!state.visible) {
+      return
+    }
+
+    if (!props.closeOnPressEscape) {
+      return
+    }
+
+    if (event.key === 'Escape' || event.key === 'Esc') {
+      api.handleClose('esc', true)
+    }
+  }
+
+export const addKeydownEvent =
+  ({ api }: { api: IDrawerApi }) =>
+  () => {
+    document.addEventListener('keydown', api.keydown)
+  }
+
+export const removeKeydownEvent =
+  ({ api }: { api: IDrawerApi }) =>
+  () => {
+    document.removeEventListener('keydown', api.keydown)
+  }
+/* ================================================== */
+
 export const mousedown =
   ({ state, vm }: { vm: ISharedRenderlessParamUtils<IDrawerCT>['vm']; state: IDrawerState }) =>
   (event) => {

packages/renderless/src/drawer/vue.ts

@@ -12,7 +12,10 @@ import {
   handleClose,
   computedWidth,
   computedHeight,
-  open
+  open,
+  keydown,
+  addKeydownEvent,
+  removeKeydownEvent
 } from './index'
 import type {
   IDrawerProps,
@@ -50,8 +53,11 @@ export const renderless = (
     mousedown: mousedown({ state, vm }),
     mousemove: mousemove({ state, props, emit }),
     mouseup: mouseup({ state }),
-    addDragEvent: addDragEvent({ api: api as IDrawerApi, vm }),
-    removeDragEvent: removeDragEvent({ api: api as IDrawerApi, vm }),
+    keydown: keydown({ api, state, props }),
+    addKeydownEvent: addKeydownEvent({ api }),
+    removeKeydownEvent: removeKeydownEvent({ api }),
+    addDragEvent: addDragEvent({ api, vm }),
+    removeDragEvent: removeDragEvent({ api, vm }),
     watchVisible: watchVisible({ state, api }),
     showScrollbar: showScrollbar(lockScrollClass),
     hideScrollbar: hideScrollbar(lockScrollClass),
@@ -61,13 +67,15 @@ export const renderless = (
 
   onMounted(() => {
     props.dragable && api.addDragEvent()
+    api.addKeydownEvent()
     if (props.lockScroll && props.visible) {
       api.showScrollbar()
     }
   })
 
   onBeforeUnmount(() => {
     props.dragable && api.removeDragEvent()
+    api.removeKeydownEvent()
     props.lockScroll && api.hideScrollbar()
   })
 

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

@@ -161,7 +161,8 @@ export default defineComponent({
     'zIndex',
     'beforeClose',
     'tipsProps',
-    'customSlots'
+    'customSlots',
+    'closeOnPressEscape'
   ],
   emits: ['update:visible', 'open', 'close', 'confirm', 'drag'],
   setup(props, context) {