feat: drawer add rtl

Author: tangjinzhou

components/drawer/index.en-US.md

@@ -2,7 +2,7 @@
 category: Components
 type: Feedback
 title: Drawer
-cover: https://gw.alipayobjects.com/zos/alicdn/7z8NJQhFb/Drawer.svg
+cover: https://img.alicdn.com/imgextra/i4/O1CN019djdZP1OHwXSRGCOW_!!6000000001681-55-tps-161-117.svg
 ---
 
 A panel which slides in from the edge of the screen.
@@ -26,12 +26,12 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 | closeIcon | Custom close icon | VNode \| slot | <CloseOutlined /> | 3.0.0 |
 | contentWrapperStyle | Style of the drawer wrapper of content part | CSSProperties | - | 3.0.0 |
 | destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false |  |
-| drawerStyle | Style of the popup layer element | object | - |  |
+| drawerStyle | Style of the popup layer element | CSSProperties | - |  |
 | extra | Extra actions area at corner | VNode \| slot | - | 3.0.0 |
 | footer | The footer for Drawer | VNode \| slot | - | 3.0.0 |
 | footerStyle | Style of the drawer footer part | CSSProperties | - | 3.0.0 |
 | forceRender | Prerender Drawer component forcely | boolean | false | 3.0.0 |
-| getContainer | Return the mounted node for Drawer | HTMLElement \| `() => HTMLElement` \| Selectors | 'body' |  |
+| getContainer | mounted node and display window for Drawer | HTMLElement \| `() => HTMLElement` \| Selectors | 'body' |  |
 | headerStyle | Style of the drawer header part | CSSProperties | - | 3.0.0 |
 | height | Placement is `top` or `bottom`, height of the Drawer dialog | string \| number | 378 |  |
 | keyboard | Whether support press esc to close | boolean | true |  |

components/drawer/index.tsx

@@ -34,14 +34,19 @@ export interface PushState {
 }
 
 const defaultPushState: PushState = { distance: 180 };
-
+type getContainerFunc = () => HTMLElement;
 export const drawerProps = () => ({
   autofocus: { type: Boolean, default: undefined },
   closable: { type: Boolean, default: undefined },
   closeIcon: PropTypes.any,
   destroyOnClose: { type: Boolean, default: undefined },
   forceRender: { type: Boolean, default: undefined },
-  getContainer: PropTypes.any,
+  getContainer: {
+    type: [String, Function, Boolean, Object] as PropType<
+      string | HTMLElement | getContainerFunc | false
+    >,
+    default: undefined as string | HTMLElement | getContainerFunc | false,
+  },
   maskClosable: { type: Boolean, default: undefined },
   mask: { type: Boolean, default: undefined },
   maskStyle: { type: Object as PropType<CSSProperties>, default: undefined as CSSProperties },
@@ -108,7 +113,14 @@ const Drawer = defineComponent({
     const destroyClose = ref(false);
     const vcDrawer = ref(null);
     const parentDrawerOpts = inject('parentDrawerOpts', null);
-    const { prefixCls } = useConfigInject('drawer', props);
+    const { prefixCls, getPopupContainer, direction } = useConfigInject('drawer', props);
+    const getContainer = computed(() =>
+      // 有可能为 false，所以不能直接判断
+      props.getContainer === undefined && getPopupContainer.value
+        ? () => getPopupContainer.value(document.body)
+        : props.getContainer,
+    );
+
     devWarning(
       !props.afterVisibleChange,
       'Drawer',
@@ -366,13 +378,15 @@ const Drawer = defineComponent({
           [className]: className,
           [wrapClassName]: !!wrapClassName,
           [haveMask]: !!haveMask,
+          [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
         }),
         style: drawerStyle.value,
         ref: vcDrawer,
       };
       return (
         <VcDrawer
           {...vcDrawerProps}
+          getContainer={getContainer.value}
           v-slots={{
             handler: props.handle ? () => props.handle : slots.handle,
             default: () => renderBody(prefixCls.value),

components/drawer/index.zh-CN.md

@@ -3,7 +3,7 @@ category: Components
 type: 反馈
 title: Drawer
 subtitle: 抽屉
-cover: https://gw.alipayobjects.com/zos/alicdn/7z8NJQhFb/Drawer.svg
+cover: https://img.alicdn.com/imgextra/i4/O1CN019djdZP1OHwXSRGCOW_!!6000000001681-55-tps-161-117.svg
 ---
 
 屏幕边缘滑出的浮层面板。
@@ -31,7 +31,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/7z8NJQhFb/Drawer.svg
 | footer | 抽屉的页脚 | VNode \| slot | - | 3.0.0 |
 | footerStyle | 抽屉页脚部件的样式 | CSSProperties | - | 3.0.0 |
 | forceRender | 预渲染 Drawer 内元素 | boolean | false | 3.0.0 |
-| getContainer | 指定 Drawer 挂载的 HTML 节点 | HTMLElement \| `() => HTMLElement` \| Selectors | 'body' |  |
+| getContainer | 指定 Drawer 挂载的节点，**并在容器内展现** \| `() => HTMLElement` \| Selectors | 'body' |  |
 | headerStyle | 用于设置 Drawer 头部的样式 | CSSProperties | - | 3.0.0 |
 | height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 378 |  |
 | keyboard | 是否支持键盘 esc 关闭 | boolean | true |  |