feat(Drawer): add overlayProps attr (#3978)

* feat(Drawer): add overlayProps attr

* chore: unified code standard

Author: anlyyao

packages/components/drawer/README.en-US.md

@@ -10,15 +10,23 @@ style | Object | - | CSS(Cascading Style Sheets) | N
 custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
 close-on-overlay-click | Boolean | true | \- | N
 destroy-on-close | Boolean | false | \- | N
-footer | Slot | - | `0.29.0`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N
+
 items | Array | - | Typescript：`DrawerItem[]` `interface DrawerItem { title: string; icon: string; }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/drawer/type.ts) | N
+overlay-props | Object | {} | Typescript：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/drawer/type.ts) | N
 placement | String | right | options: left/right | N
 show-overlay | Boolean | true | \- | N
-title | String / Slot | - | `0.29.0`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N
+title | String | - | `0.29.0` | N
 using-custom-navbar | Boolean | false | \- | N
 visible | Boolean | false | \- | N
 z-index | Number | 11500 | \- | N
 
+### Drawer Slots
+
+name | Description
+-- | --
+footer | `0.29.0`
+title | `0.29.0`
+
 ### Drawer Events
 
 name | params | description

packages/components/drawer/README.md

@@ -53,15 +53,23 @@ style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
 close-on-overlay-click | Boolean | true | 点击蒙层时是否触发抽屉关闭事件 | N
 destroy-on-close | Boolean | false | 抽屉关闭时是否销毁节点 | N
-footer | Slot | - | `0.29.0`。抽屉的底部。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N
+
 items | Array | - | 抽屉里的列表项。TS 类型：`DrawerItem[]` `interface DrawerItem { title: string; icon: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/drawer/type.ts) | N
+overlay-props | Object | {} | 遮罩层的属性，透传至 overlay。TS 类型：`OverlayProps`，[Overlay API Documents](./overlay?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/drawer/type.ts) | N
 placement | String | right | 抽屉方向。可选项：left/right | N
 show-overlay | Boolean | true | 是否显示遮罩层 | N
-title | String / Slot | - | `0.29.0`。抽屉的标题。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N
+title | String | - | `0.29.0`。抽屉的标题 | N
 using-custom-navbar | Boolean | false | 是否使用了自定义导航栏 | N
 visible | Boolean | false | 组件是否可见 | N
 z-index | Number | 11500 | 抽屉层级，样式默认为 11500 | N
 
+### Drawer Slots
+
+名称 | 描述
+-- | --
+footer | `0.29.0`。抽屉的底部
+title | `0.29.0`。抽屉的标题
+
 ### Drawer Events
 
 名称 | 参数 | 描述

packages/components/drawer/drawer.ts

@@ -24,7 +24,7 @@ export default class Drawer extends SuperComponent {
 
   methods = {
     // closeOnOverlayClick为true时才能触发popup的visible-change事件
-    visibleChange({ detail }) {
+    onVisibleChange({ detail }) {
       const { visible } = detail;
       const { showOverlay } = this.data;
 
@@ -41,7 +41,7 @@ export default class Drawer extends SuperComponent {
       }
     },
 
-    itemClick(detail) {
+    onItemClick(detail) {
       const { index, item } = detail.currentTarget.dataset;
 
       this.triggerEvent('item-click', { index, item });

packages/components/drawer/drawer.wxml

@@ -4,13 +4,14 @@
   wx:if="{{!destroyOnClose || visible}}"
   style="{{_._style([style, customStyle])}}"
   class="class"
-  bind:visible-change="visibleChange"
   visible="{{visible}}"
-  zIndex="{{zIndex}}"
-  usingCustomNavbar="{{usingCustomNavbar}}"
+  z-index="{{zIndex}}"
+  using-custom-navbar="{{usingCustomNavbar}}"
   placement="{{placement == 'right' ? 'right' : 'left'}}"
-  showOverlay="{{showOverlay}}"
-  closeOnOverlayClick="{{closeOnOverlayClick}}"
+  show-overlay="{{showOverlay}}"
+  overlay-props="{{overlayProps}}"
+  close-on-click-overlay="{{closeOnOverlayClick}}"
+  bind:visible-change="onVisibleChange"
 >
   <view class="{{classPrefix}}">
     <slot name="title" />
@@ -26,9 +27,9 @@
         wx:key="index"
         data-item="{{item}}"
         data-index="{{index}}"
-        bindtap="itemClick"
         aria-role="{{ ariaRole || 'button' }}"
         aria-label="{{item.title}}"
+        bindtap="onItemClick"
       >
         <view aria-hidden="{{true}}" wx:if="{{item.icon}}" class="{{classPrefix}}__sidebar-item-icon">
           <t-icon name="{{item.icon}}" />

packages/components/drawer/props.ts

@@ -20,6 +20,11 @@ const props: TdDrawerProps = {
   items: {
     type: Array,
   },
+  /** 遮罩层的属性，透传至 overlay */
+  overlayProps: {
+    type: Object,
+    value: {},
+  },
   /** 抽屉方向 */
   placement: {
     type: String,

packages/components/drawer/type.ts

@@ -4,6 +4,8 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { OverlayProps } from '../overlay/index';
+
 export interface TdDrawerProps {
   /**
    * 点击蒙层时是否触发抽屉关闭事件
@@ -28,6 +30,14 @@ export interface TdDrawerProps {
     type: ArrayConstructor;
     value?: DrawerItem[];
   };
+  /**
+   * 遮罩层的属性，透传至 overlay
+   * @default {}
+   */
+  overlayProps?: {
+    type: ObjectConstructor;
+    value?: OverlayProps;
+  };
   /**
    * 抽屉方向
    * @default right