feat(Drawer): [Drawer]support custom whether confirm event close the drawer and improve the type declaration (#1588)

* style(drawer): [drawer]improve the type declaration of drawer component

* feat(drawer): [drawer]Support customizing whether the drawer is closed after clicking the confirm button

* docs(drawer): [drawer]update the document of drawer component

examples/sites/demos/apis/drawer.js

@@ -11,7 +11,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '弹窗关闭前的回调，返回 false 会阻止弹窗关闭',
-            'en-US': 'hook before close the drawer, and block close when return false'
+            'en-US': 'Hook before close the drawer, and block close when return false'
           },
           mode: ['pc'],
           pcDemo: 'before-close'
@@ -22,7 +22,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '自定义 class 样式',
-            'en-US': ''
+            'en-US': 'Custom class style'
           },
           mode: ['mobile-first'],
           mfDemo: ''
@@ -32,8 +32,8 @@ export default {
           type: 'boolean',
           defaultValue: 'false',
           desc: {
-            'zh-CN': '控制抽屉开启或关闭宽度拖拽功能',
-            'en-US': ''
+            'zh-CN': '是否开启抽屉的宽度拖拽功能',
+            'en-US': 'Whether to enable the drawer width drag function'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'dragable',
@@ -45,7 +45,8 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '是否开启 flex 盒子布局，开启后内容区域元素自适应撑开高度，默认值为 false',
-            'en-US': ''
+            'en-US':
+              'Whether to enable the flex box layout. The content area element adaptively expands its height when enabled. The default value is false'
           },
           mode: ['mobile-first'],
           mfDemo: ''
@@ -56,7 +57,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '弹出面板是否锁定浏览器滚动条，默认值为 true',
-            'en-US': ''
+            'en-US': 'Whether the pop-up panel locks the browser scroll bar. The default value is true'
           },
           mode: ['mobile-first'],
           mfDemo: ''
@@ -66,8 +67,8 @@ export default {
           type: 'boolean',
           defaultValue: 'true',
           desc: {
-            'zh-CN': '控制遮罩层显示隐藏 ',
-            'en-US': ''
+            'zh-CN': '是否显示遮罩层',
+            'en-US': 'Whether the mask layer is displayed'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'mask',
@@ -78,8 +79,9 @@ export default {
           type: 'boolean',
           defaultValue: 'true',
           desc: {
-            'zh-CN': '默认弹窗打开后，可以单击遮罩层关闭弹窗，设置 mask-closable 为 false 后将禁用该功能',
-            'en-US': ''
+            'zh-CN': '默认情况下，弹窗打开后，可以单击遮罩层关闭弹窗，设置 mask-closable 为 false 后将禁用该功能',
+            'en-US':
+              'By default, when the popup is open, you can close the popup by clicking the mask layer. Setting mask-closable to false disables this feature'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'mask-closable',
@@ -90,8 +92,8 @@ export default {
           type: "'left' | 'right' | 'top' | 'bottom' ",
           defaultValue: "'right'",
           desc: {
-            'zh-CN': '添加 placement 属性设置抽屉的方向',
-            'en-US': ''
+            'zh-CN': '设置抽屉的方向',
+            'en-US': 'Set the drawer orientation'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'placement',
@@ -102,8 +104,8 @@ export default {
           type: 'boolean',
           defaultValue: 'true',
           desc: {
-            'zh-CN': '控制关闭图标显示',
-            'en-US': ''
+            'zh-CN': '是否显示关闭图标',
+            'en-US': 'Whether to display the close icon'
           },
           mode: ['pc'],
           pcDemo: 'show-close'
@@ -113,11 +115,11 @@ export default {
           type: 'boolean',
           defaultValue: 'false',
           desc: {
-            'zh-CN': '控制底部显示',
+            'zh-CN': '是否显示底部',
             'en-US': ''
           },
           mode: ['pc', 'mobile-first'],
-          pcDemo: 'show-footer',
+          pcDemo: 'Show bottom or not',
           mfDemo: ''
         },
         {
@@ -125,8 +127,8 @@ export default {
           type: 'boolean',
           defaultValue: 'true',
           desc: {
-            'zh-CN': '控制头部显示',
-            'en-US': ''
+            'zh-CN': '是否显示头部',
+            'en-US': 'Show headers or not'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'show-header',
@@ -138,7 +140,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '面板标题',
-            'en-US': ''
+            'en-US': 'Panel title'
           },
           mode: ['mobile-first'],
           mfDemo: ''
@@ -148,8 +150,8 @@ export default {
           type: 'boolean',
           defaultValue: '',
           desc: {
-            'zh-CN': '控制抽屉显示与关闭',
-            'en-US': ''
+            'zh-CN': '控制抽屉的显示与关闭',
+            'en-US': 'Control drawer display and close'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'basic-usage',
@@ -161,7 +163,7 @@ export default {
           defaultValue: "'500px'",
           desc: {
             'zh-CN': '设置抽屉的宽度',
-            'en-US': ''
+            'en-US': 'Set the width of the drawer'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'width',
@@ -173,7 +175,7 @@ export default {
           defaultValue: '2000',
           desc: {
             'zh-CN': '自定义堆叠顺序（对于某些特殊场景，比如被遮挡时可能会用到）',
-            'en-US': ''
+            'en-US': 'Custom stacking order (may be used in special scenarios, such as when occluded)'
           },
           mode: ['pc'],
           pcDemo: 'z-index'
@@ -186,7 +188,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '关闭抽屉事件',
-            'en-US': ''
+            'en-US': 'Close drawer event'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'close-event',
@@ -198,7 +200,7 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '确认事件，设置 :show-footer="true" 时有效',
-            'en-US': ''
+            'en-US': 'Confirm event. This event is emit only when show-footer="true" is set'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'confirm-event',
@@ -209,8 +211,8 @@ export default {
           type: '',
           defaultValue: '',
           desc: {
-            'zh-CN': '面板显隐时触发',
-            'en-US': ''
+            'zh-CN': '抽屉显隐时触发',
+            'en-US': 'Triggered when the drawer is displayed and hidden'
           },
           mode: ['mobile-first'],
           mfDemo: ''
@@ -222,8 +224,8 @@ export default {
           type: '',
           defaultValue: '',
           desc: {
-            'zh-CN': '关闭面板',
-            'en-US': ''
+            'zh-CN': '关闭抽屉',
+            'en-US': 'Close Drawer'
           },
           mode: ['mobile-first'],
           mfDemo: ''
@@ -233,8 +235,8 @@ export default {
           type: '',
           defaultValue: '',
           desc: {
-            'zh-CN': '确认并关闭面板',
-            'en-US': ''
+            'zh-CN': '确认并关闭抽屉',
+            'en-US': 'Confirm and close the drawer'
           },
           mode: ['mobile-first'],
           mfDemo: ''
@@ -243,11 +245,9 @@ export default {
       slots: [
         {
           name: 'default',
-          type: '--',
-          defaultValue: '',
           desc: {
             'zh-CN': '默认插槽',
-            'en-US': ''
+            'en-US': 'Default slot'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'default-slot',
@@ -255,11 +255,9 @@ export default {
         },
         {
           name: 'footer',
-          type: '--',
-          defaultValue: '',
           desc: {
             'zh-CN': '底部插槽',
-            'en-US': ''
+            'en-US': 'Footer slot'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'footer-slot',
@@ -267,11 +265,9 @@ export default {
         },
         {
           name: 'header',
-          type: '--',
-          defaultValue: '',
           desc: {
             'zh-CN': '头部插槽',
-            'en-US': ''
+            'en-US': 'header Slot'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'header-slot',
@@ -279,11 +275,9 @@ export default {
         },
         {
           name: 'header-right',
-          type: '--',
-          defaultValue: '',
           desc: {
             'zh-CN': '头部右侧插槽',
-            'en-US': ''
+            'en-US': 'header-right slot'
           },
           mode: ['pc', 'mobile-first'],
           pcDemo: 'header-right-slot',

examples/sites/demos/pc/app/drawer/basic-usage-composition-api.vue

@@ -1,12 +1,8 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 抽屉组件 </tiny-button>
-    <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event">
-      <div>
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+    <tiny-button @click="openDrawer" type="primary"> 抽屉组件 </tiny-button>
+    <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" @confirm="confirm">
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -17,7 +13,11 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 
-function fn() {
+function openDrawer() {
   visible.value = true
 }
+
+function confirm() {
+  visible.value = false
+}
 </script>

examples/sites/demos/pc/app/drawer/basic-usage.vue

@@ -1,12 +1,8 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 抽屉组件 </tiny-button>
-    <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event">
-      <div>
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+    <tiny-button @click="openDrawer" type="primary"> 抽屉组件 </tiny-button>
+    <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" @confirm="confirm">
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -25,8 +21,11 @@ export default {
     }
   },
   methods: {
-    fn() {
+    openDrawer() {
       this.visible = true
+    },
+    confirm() {
+      this.visible = false
     }
   }
 }

examples/sites/demos/pc/app/drawer/before-close-composition-api.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="demo-drawer">
     <tiny-button @click="toggleDrawer(true)" type="primary"> 点击展开 Drawer </tiny-button>
-    <tiny-drawer title="抽屉关闭将会被拦截" v-model:visible="visible" :before-close="onBeforeClose" show-footer>
+    <tiny-drawer
+      title="抽屉关闭将会被拦截"
+      v-model:visible="visible"
+      :before-close="onBeforeClose"
+      show-footer
+      @confirm="confirm"
+    >
       <tiny-button @click="toggleDrawer(false)" type="primary"> 关闭 Drawer </tiny-button>
     </tiny-drawer>
   </div>
@@ -21,4 +27,8 @@ const onBeforeClose = (type) => {
   Modal.message({ message: `beforeClose 回调参数 type =  ${type}`, status: 'info', duration: 5000 })
   return false
 }
+
+const confirm = () => {
+  visible.value = false
+}
 </script>

examples/sites/demos/pc/app/drawer/before-close.vue

@@ -5,6 +5,7 @@
       title="抽屉关闭将会被拦截"
       :visible="visible"
       @update:visible="visible = $event"
+      @confirm="confirm"
       show-footer
       :before-close="onBeforeClose"
     >
@@ -33,6 +34,9 @@ export default {
     onBeforeClose(type) {
       Modal.message({ message: `beforeClose 回调参数 type =  ${type}`, status: 'info', duration: 5000 })
       return false
+    },
+    confirm() {
+      this.visible = false
     }
   }
 }

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

@@ -1,12 +1,15 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 关闭事件示例 </tiny-button>
-    <tiny-drawer title="标题" :show-footer="true" :visible="visible" @update:visible="visible = $event" @close="close">
-      <div style="height: 200px; text-align: center">
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+    <tiny-button @click="openDrawer" type="primary"> 关闭事件示例 </tiny-button>
+    <tiny-drawer
+      title="标题"
+      :show-footer="true"
+      :visible="visible"
+      @update:visible="visible = $event"
+      @close="close"
+      @confirm="confirm"
+    >
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -17,11 +20,16 @@ import { Drawer as TinyDrawer, Button as TinyButton, Modal } from '@opentiny/vue
 
 const visible = ref(false)
 
-function fn() {
+function openDrawer() {
   visible.value = true
 }
 
 function close() {
   Modal.message('关闭事件')
 }
+
+function confirm() {
+  Modal.message({ message: '确认事件', status: 'success' })
+  visible.value = false
+}
 </script>

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

@@ -1,12 +1,15 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 关闭事件示例 </tiny-button>
-    <tiny-drawer title="标题" :show-footer="true" :visible="visible" @update:visible="visible = $event" @close="close">
-      <div style="height: 200px; text-align: center">
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+    <tiny-button @click="openDrawer" type="primary"> 关闭事件示例 </tiny-button>
+    <tiny-drawer
+      title="标题"
+      :show-footer="true"
+      :visible="visible"
+      @update:visible="visible = $event"
+      @close="close"
+      @confirm="confirm"
+    >
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -25,11 +28,15 @@ export default {
     }
   },
   methods: {
-    fn() {
+    openDrawer() {
       this.visible = true
     },
     close() {
       Modal.message('关闭事件')
+    },
+    confirm() {
+      Modal.message({ message: '确认事件', status: 'success' })
+      this.visible = false
     }
   }
 }

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 确认事件示例 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 确认事件示例 </tiny-button>
     <tiny-drawer
       title="标题"
       :show-footer="true"
@@ -8,11 +8,7 @@
       @update:visible="visible = $event"
       @confirm="confirm"
     >
-      <div style="height: 200px; text-align: center">
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -23,11 +19,11 @@ import { Drawer as TinyDrawer, Button as TinyButton, Modal } from '@opentiny/vue
 
 const visible = ref(false)
 
-function fn() {
+function openDrawer() {
   visible.value = true
 }
 
 function confirm() {
-  Modal.message({ message: '确认事件', status: 'info' })
+  Modal.message({ message: '确认事件', status: 'success' })
 }
 </script>

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 确认事件示例 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 确认事件示例 </tiny-button>
     <tiny-drawer
       title="标题"
       :show-footer="true"
@@ -8,11 +8,7 @@
       @update:visible="visible = $event"
       @confirm="confirm"
     >
-      <div style="height: 200px; text-align: center">
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -31,11 +27,12 @@ export default {
     }
   },
   methods: {
-    fn() {
+    openDrawer() {
       this.visible = true
     },
     confirm() {
-      Modal.message({ message: '确认事件', status: 'info' })
+      Modal.message({ message: '确认事件', status: 'success' })
+      this.visible = false
     }
   }
 }

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

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 宽度拖拽 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 宽度拖拽 </tiny-button>
     <tiny-drawer title="标题" dragable :visible="visible" @update:visible="visible = $event">
-      横向拖拽左边框可改变抽屉主体宽度
+      <div style="padding: 32px">横向拖拽左边框可改变抽屉主体宽度</div>
     </tiny-drawer>
   </div>
 </template>
@@ -13,7 +13,7 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 
-function fn() {
+function openDrawer() {
   visible.value = true
 }
 </script>

examples/sites/demos/pc/app/drawer/dragable.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 宽度拖拽 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 宽度拖拽 </tiny-button>
     <tiny-drawer title="标题" dragable :visible="visible" @update:visible="visible = $event">
-      横向拖拽左边框可改变抽屉主体宽度
+      <div style="padding: 32px">横向拖拽左边框可改变抽屉主体宽度</div>
     </tiny-drawer>
   </div>
 </template>
@@ -21,7 +21,7 @@ export default {
     }
   },
   methods: {
-    fn() {
+    openDrawer() {
       this.visible = true
     }
   }

examples/sites/demos/pc/app/drawer/footer-slot-composition-api.vue

@@ -1,17 +1,12 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 底部插槽示例 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 底部插槽示例 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-footer="true">
-      <div>
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
-
+      <div style="padding: 32px">内容区域</div>
       <template #footer>
         <div class="my-footer">
           <span>自定义底部文本</span>
-          <tiny-button type="primary" native-type="submit">确认提交</tiny-button>
+          <tiny-button type="primary" native-type="submit" @click="visible = false">确认提交</tiny-button>
         </div>
       </template>
     </tiny-drawer>
@@ -24,7 +19,7 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 
-function fn() {
+function openDrawer() {
   visible.value = true
 }
 </script>

examples/sites/demos/pc/app/drawer/footer-slot.vue

@@ -1,17 +1,13 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 底部插槽示例 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 底部插槽示例 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-footer="true">
-      <div>
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+      <div style="padding: 32px">内容区域</div>
 
       <template #footer>
         <div class="my-footer">
           <span>自定义底部文本</span>
-          <tiny-button type="primary" native-type="submit">确认提交</tiny-button>
+          <tiny-button type="primary" native-type="submit" @click="visible = false">确认提交</tiny-button>
         </div>
       </template>
     </tiny-drawer>
@@ -32,7 +28,7 @@ export default {
     }
   },
   methods: {
-    fn() {
+    openDrawer() {
       this.visible = true
     }
   }

examples/sites/demos/pc/app/drawer/header-right-slot-composition-api.vue

@@ -1,17 +1,13 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 头部右侧插槽示例 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 头部右侧插槽示例 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-close="false">
       <template #header-right>
         <div class="my-header-right">
           <span>自定义头部右侧</span>
         </div>
       </template>
-      <div>
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -22,7 +18,7 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 
-function fn() {
+function openDrawer() {
   visible.value = true
 }
 </script>

examples/sites/demos/pc/app/drawer/header-right-slot.vue

@@ -1,17 +1,13 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 头部右侧插槽示例 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 头部右侧插槽示例 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-close="false">
       <template #header-right>
         <div class="my-header-right">
           <span>自定义头部右侧</span>
         </div>
       </template>
-      <div>
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -30,7 +26,7 @@ export default {
     }
   },
   methods: {
-    fn() {
+    openDrawer() {
       this.visible = true
     }
   }

examples/sites/demos/pc/app/drawer/header-slot-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 头部插槽示例 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 头部插槽示例 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event">
       <template #header>
         <div class="my-header">
@@ -8,11 +8,7 @@
           <p>自定义副标题xxxxxx</p>
         </div>
       </template>
-      <div>
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+      <span>内容区域</span>
     </tiny-drawer>
   </div>
 </template>
@@ -23,7 +19,7 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 
-function fn() {
+function openDrawer() {
   visible.value = true
 }
 </script>

examples/sites/demos/pc/app/drawer/header-slot.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 头部插槽示例 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 头部插槽示例 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event">
       <template #header>
         <div class="my-header">
@@ -8,11 +8,7 @@
           <p>自定义副标题xxxxxx</p>
         </div>
       </template>
-      <div>
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+      <span>内容区域</span>
     </tiny-drawer>
   </div>
 </template>
@@ -31,7 +27,7 @@ export default {
     }
   },
   methods: {
-    fn() {
+    openDrawer() {
       this.visible = true
     }
   }

examples/sites/demos/pc/app/drawer/mask-closable-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary" style="max-width: 200px">单击遮罩层不关闭抽屉</tiny-button>
+    <tiny-button @click="openDrawer" type="primary" style="max-width: 200px">单击遮罩层不关闭抽屉</tiny-button>
     <tiny-drawer title="标题" :mask-closable="false" :visible="visible" @update:visible="visible = $event">
       <div style="padding: 32px">单击遮罩层, 不关闭抽屉</div>
     </tiny-drawer>
@@ -13,7 +13,7 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 
-function fn() {
+function openDrawer() {
   visible.value = true
 }
 </script>

examples/sites/demos/pc/app/drawer/mask-closable.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary" style="max-width: 200px">单击遮罩层不关闭抽屉</tiny-button>
+    <tiny-button @click="openDrawer" type="primary" style="max-width: 200px">单击遮罩层不关闭抽屉</tiny-button>
     <tiny-drawer title="标题" :mask-closable="false" :visible="visible" @update:visible="visible = $event">
       <div style="padding: 32px">单击遮罩层, 不关闭抽屉</div>
     </tiny-drawer>
@@ -21,7 +21,7 @@ export default {
     }
   },
   methods: {
-    fn() {
+    openDrawer() {
       this.visible = true
     }
   }

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 关闭遮罩层 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 关闭遮罩层 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" :mask="false" @update:visible="visible = $event">
       <div style="padding: 32px">左侧遮罩层已隐藏</div>
     </tiny-drawer>
@@ -13,7 +13,7 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 
-function fn() {
+function openDrawer() {
   visible.value = true
 }
 </script>

examples/sites/demos/pc/app/drawer/mask.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 关闭遮罩层 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 关闭遮罩层 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" :mask="false" @update:visible="visible = $event">
       <div style="padding: 32px">左侧遮罩层已隐藏</div>
     </tiny-drawer>
@@ -21,7 +21,7 @@ export default {
     }
   },
   methods: {
-    fn() {
+    openDrawer() {
       this.visible = true
     }
   }

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

@@ -1,16 +1,12 @@
 <template>
   <div>
-    <tiny-button @click="fn('left')"> left </tiny-button>
-    <tiny-button @click="fn('right')"> right </tiny-button>
-    <tiny-button @click="fn('top')"> top </tiny-button>
-    <tiny-button @click="fn('bottom')"> bottom </tiny-button>
+    <tiny-button @click="openDrawer('left')"> left </tiny-button>
+    <tiny-button @click="openDrawer('right')"> right </tiny-button>
+    <tiny-button @click="openDrawer('top')"> top </tiny-button>
+    <tiny-button @click="openDrawer('bottom')"> bottom </tiny-button>
 
     <tiny-drawer title="标题" :placement="placement" v-model:visible="visible">
-      <div style="height: 200px; text-align: center">
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -22,7 +18,7 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 const visible = ref(false)
 const placement = ref('right')
 
-function fn(side) {
+function openDrawer(side) {
   placement.value = side
   visible.value = true
 }

examples/sites/demos/pc/app/drawer/placement.vue

@@ -1,16 +1,12 @@
 <template>
   <div>
-    <tiny-button @click="fn('left')"> left </tiny-button>
-    <tiny-button @click="fn('right')"> right </tiny-button>
-    <tiny-button @click="fn('top')"> top </tiny-button>
-    <tiny-button @click="fn('bottom')"> bottom </tiny-button>
+    <tiny-button @click="openDrawer('left')"> left </tiny-button>
+    <tiny-button @click="openDrawer('right')"> right </tiny-button>
+    <tiny-button @click="openDrawer('top')"> top </tiny-button>
+    <tiny-button @click="openDrawer('bottom')"> bottom </tiny-button>
 
     <tiny-drawer title="标题" :placement="placement" :visible="visible" @update:visible="visible = $event">
-      <div style="height: 200px; text-align: center">
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -30,7 +26,7 @@ export default {
     }
   },
   methods: {
-    fn(side) {
+    openDrawer(side) {
       this.placement = side
       this.visible = true
     }

examples/sites/demos/pc/app/drawer/show-close-composition-api.vue

@@ -1,12 +1,8 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 隐藏关闭图标 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 隐藏关闭图标 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-close="false">
-      <div>
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -17,7 +13,7 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 
-function fn() {
+function openDrawer() {
   visible.value = true
 }
 </script>

examples/sites/demos/pc/app/drawer/show-close.vue

@@ -1,12 +1,8 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 隐藏关闭图标 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 隐藏关闭图标 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-close="false">
-      <div>
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -25,7 +21,7 @@ export default {
     }
   },
   methods: {
-    fn() {
+    openDrawer() {
       this.visible = true
     }
   }

examples/sites/demos/pc/app/drawer/show-footer-composition-api.vue

@@ -1,13 +1,15 @@
 <template>
   <div>
-    <tiny-button type="primary" @click="showDrawer()"> 显示底部 </tiny-button>
+    <tiny-button type="primary" @click="openDrawer"> 显示底部 </tiny-button>
 
-    <tiny-drawer :show-footer="showFooter" title="标题" :visible="visible" @update:visible="visible = $event">
-      <div style="height: 200px; text-align: center">
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+    <tiny-drawer
+      :show-footer="showFooter"
+      title="标题"
+      :visible="visible"
+      @update:visible="visible = $event"
+      @confirm="confirm"
+    >
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -19,7 +21,11 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 const visible = ref(false)
 const showFooter = ref(true)
 
-function showDrawer() {
+function openDrawer() {
   visible.value = true
 }
+
+function confirm() {
+  visible.value = false
+}
 </script>

examples/sites/demos/pc/app/drawer/show-footer.vue

@@ -1,13 +1,15 @@
 <template>
   <div>
-    <tiny-button type="primary" @click="showDrawer()"> 显示底部 </tiny-button>
+    <tiny-button type="primary" @click="openDrawer"> 显示底部 </tiny-button>
 
-    <tiny-drawer :show-footer="showFooter" title="标题" :visible="visible" @update:visible="visible = $event">
-      <div style="height: 200px; text-align: center">
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+    <tiny-drawer
+      :show-footer="showFooter"
+      title="标题"
+      :visible="visible"
+      @update:visible="visible = $event"
+      @confirm="confirm"
+    >
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -27,8 +29,11 @@ export default {
     }
   },
   methods: {
-    showDrawer() {
+    openDrawer() {
       this.visible = true
+    },
+    confirm() {
+      this.visible = false
     }
   }
 }

examples/sites/demos/pc/app/drawer/show-header-composition-api.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 隐藏头部 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 隐藏头部 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-header="false">
-      <div style="padding: 32px 0">内容区域</div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -13,7 +13,7 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 
 const visible = ref(false)
 
-function fn() {
+function openDrawer() {
   visible.value = true
 }
 </script>

examples/sites/demos/pc/app/drawer/show-header.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 隐藏头部 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 隐藏头部 </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :show-header="false">
-      <div style="padding: 32px 0">内容区域</div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -21,7 +21,7 @@ export default {
     }
   },
   methods: {
-    fn() {
+    openDrawer() {
       this.visible = true
     }
   }

examples/sites/demos/pc/app/drawer/tips-props-composition-api.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="demo-drawer">
-    <tiny-button @click="fn" type="primary"> 展开抽屉 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 展开抽屉 </tiny-button>
     <tiny-drawer title="标题" :tipsProps="tipsProps" :visible="visible" @update:visible="visible = $event">
-      <div>内容区域</div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -17,7 +17,7 @@ const tipsProps = reactive({
   placement: 'right'
 })
 
-function fn() {
+function openDrawer() {
   visible.value = true
 }
 </script>

examples/sites/demos/pc/app/drawer/tips-props.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="demo-drawer">
-    <tiny-button @click="fn" type="primary"> 展开抽屉 </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 展开抽屉 </tiny-button>
     <tiny-drawer title="标题" :tipsProps="tipsProps" :visible="visible" @update:visible="visible = $event">
-      <div>内容区域</div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -25,7 +25,7 @@ export default {
     }
   },
   methods: {
-    fn() {
+    openDrawer() {
       this.visible = true
     }
   }

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

@@ -192,7 +192,7 @@ export default {
         'en-US': ''
       },
       desc: {
-        'zh-CN': '<p>关闭抽屉事件。</p>',
+        'zh-CN': '<p>关闭抽屉事件，抽屉关闭时触发。</p>',
         'en-US': ''
       },
       codeFiles: ['close-event.vue']
@@ -204,7 +204,8 @@ export default {
         'en-US': ''
       },
       desc: {
-        'zh-CN': '<p>确认事件，设置 <code>:show-footer="true"</code> 时有效。</p>',
+        'zh-CN':
+          '<p>确认事件，点击确认按钮时触发，设置 <code>:show-footer="true"</code> 且不使用底部插槽 <code>footer</code> 时有效。</p>',
         'en-US': ''
       },
       codeFiles: ['confirm-event.vue']

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

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <tiny-button @click="fn0" type="primary"> 设置宽度为900px </tiny-button>
-    <tiny-button @click="fn1" plain> 宽度改为700px </tiny-button>
-    <tiny-button @click="fn2" plain> 宽度改为80% </tiny-button>
+    <tiny-button @click="openDrawer0" type="primary"> 设置宽度为900px </tiny-button>
+    <tiny-button @click="openDrawer1" plain> 宽度改为700px </tiny-button>
+    <tiny-button @click="openDrawer2" plain> 宽度改为80% </tiny-button>
 
     <tiny-drawer title="标题" :width="width" :visible="visible" @update:visible="visible = $event">
-      <div style="padding: 32px 0">内容区域</div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -17,16 +17,16 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 const visible = ref(false)
 const width = ref('900px')
 
-function fn0() {
+function openDrawer0() {
   visible.value = true
 }
 
-function fn1() {
+function openDrawer1() {
   width.value = '700px'
   visible.value = true
 }
 
-function fn2() {
+function openDrawer2() {
   width.value = '80%'
   visible.value = true
 }

examples/sites/demos/pc/app/drawer/width.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <tiny-button @click="fn0" type="primary"> 设置宽度为900px </tiny-button>
-    <tiny-button @click="fn1" plain> 宽度改为700px </tiny-button>
-    <tiny-button @click="fn2" plain> 宽度改为80% </tiny-button>
+    <tiny-button @click="openDrawer0" type="primary"> 设置宽度为900px </tiny-button>
+    <tiny-button @click="openDrawer1" plain> 宽度改为700px </tiny-button>
+    <tiny-button @click="openDrawer2" plain> 宽度改为80% </tiny-button>
 
     <tiny-drawer title="标题" :width="width" :visible="visible" @update:visible="visible = $event">
-      <div style="padding: 32px 0">内容区域</div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -25,14 +25,14 @@ export default {
     }
   },
   methods: {
-    fn0() {
+    openDrawer0() {
       this.visible = true
     },
-    fn1() {
+    openDrawer1() {
       this.width = '700px'
       this.visible = true
     },
-    fn2() {
+    openDrawer2() {
       this.width = '80%'
       this.visible = true
     }

examples/sites/demos/pc/app/drawer/z-index-composition-api.vue

@@ -1,12 +1,8 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 自定义 z-index </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 自定义 z-index </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :z-index="zIndex">
-      <div>
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -18,7 +14,7 @@ import { Drawer as TinyDrawer, Button as TinyButton } from '@opentiny/vue'
 const visible = ref(false)
 const zIndex = ref(3000)
 
-function fn() {
+function openDrawer() {
   visible.value = true
 }
 </script>

examples/sites/demos/pc/app/drawer/z-index.vue

@@ -1,12 +1,8 @@
 <template>
   <div>
-    <tiny-button @click="fn" type="primary"> 自定义 z-index </tiny-button>
+    <tiny-button @click="openDrawer" type="primary"> 自定义 z-index </tiny-button>
     <tiny-drawer title="标题" :visible="visible" @update:visible="visible = $event" :z-index="zIndex">
-      <div>
-        <br />
-        <br />
-        <span>内容区域</span>
-      </div>
+      <div style="padding: 32px">内容区域</div>
     </tiny-drawer>
   </div>
 </template>
@@ -26,7 +22,7 @@ export default {
     }
   },
   methods: {
-    fn() {
+    openDrawer() {
       this.visible = true
     }
   }

packages/renderless/src/drawer/index.ts

@@ -8,13 +8,15 @@ export const computedWidth =
     designConfig,
     props,
     constants
-  }: Pick<ISharedRenderlessParamUtils, 'state' | 'designConfig' | 'props' | 'constants'>) =>
+  }: Pick<ISharedRenderlessParamUtils<IDrawerCT>, 'designConfig' | 'constants'> & { state: IDrawerState } & {
+    props: IDrawerProps
+  }) =>
   (): string => {
     if (state.width) {
       return state.width + 'px'
     }
 
-    return props.width || designConfig?.constants?.DEFAULT_WIDTH || constants.DEFAULT_WIDTH
+    return props.width || designConfig?.constants?.DEFAULT_WIDTH || (constants as IDrawerCT).DEFAULT_WIDTH
   }
 
 export const close =
@@ -46,7 +48,7 @@ export const confirm =
   }
 
 export const handleClose =
-  ({ emit, props, state }: { emit: ISharedRenderlessParamUtils['emit']; state: IDrawerState }) =>
+  ({ emit, props, state }: { emit: ISharedRenderlessParamUtils['emit']; state: IDrawerState; props: IDrawerProps }) =>
   (type, force) => {
     const isMaskNotClosable = type === 'mask' && !props.maskClosable
     const isBlockClose = !force && typeof props.beforeClose === 'function' && props.beforeClose(type) === false
@@ -54,8 +56,11 @@ export const handleClose =
       return
     }
 
-    state.toggle = false
-    emit(['close', 'confirm'].includes(type) ? type : 'close', state)
+    if (type !== 'confirm') {
+      state.toggle = false
+    }
+
+    emit(['close', 'confirm'].includes(type) ? type : 'close')
   }
 
 export const mousedown =

packages/renderless/src/drawer/vue.ts

@@ -33,11 +33,11 @@ export const renderless = (
   const lockScrollClass = constants.SCROLL_LOCK_CLASS(mode)
 
   const api: Partial<IDrawerApi> = {}
-  const state = reactive<IDrawerState>({
+  const state: IDrawerState = reactive({
     toggle: false,
     width: 0,
     dragEvent: { x: 0, isDrag: false, offsetWidth: 0 },
-    computedWidth: computed(() => api.computedWidth()),
+    computedWidth: computed(() => api.computedWidth!()),
     btnOrderReversed: vm.theme === 'saas' || designConfig?.state?.btnOrderReversed
   })
 

packages/renderless/types/drawer.type.ts

@@ -1,10 +1,11 @@
-import type { ExtractPropTypes, ComputedRef } from 'vue'
+import type { ExtractPropTypes } from 'vue'
 import type { drawerProps } from '@/drawer/src'
 import type {
   close,
   watchVisible,
   watchToggle,
   confirm,
+  computedWidth,
   mousedown,
   mouseup,
   mousemove,
@@ -19,12 +20,16 @@ export interface IDrawerState {
   toggle: boolean
   width: number
   dragEvent: { x: number; isDrag: boolean; offsetWidth: number }
-  computedWidth: ComputedRef<string>
+  computedWidth: string
+  btnOrderReversed: boolean
 }
+
 export type IDrawerProps = ExtractPropTypes<typeof drawerProps>
+
 export interface IDrawerApi {
   state: IDrawerState
   confirm: ReturnType<typeof confirm>
+  computedWidth: ReturnType<typeof computedWidth>
   close: ReturnType<typeof close>
   mousemove: ReturnType<typeof mousemove>
   mouseup: ReturnType<typeof mouseup>
@@ -37,4 +42,5 @@ export interface IDrawerApi {
   hideScrollbar: ReturnType<typeof hideScrollbar>
   watchVisibleNotImmediate: ReturnType<typeof watchVisibleNotImmediate>
 }
+
 export type IDrawerCT = ReturnType<typeof drawerProps._constants.default>