feat: drawer add rtl

pull/5820/head
tangjinzhou 2022-05-15 15:04:40 +08:00
parent 4eb8088645
commit a1ac22443e
3 changed files with 22 additions and 8 deletions

View File

@ -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 | |

View File

@ -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,6 +378,7 @@ const Drawer = defineComponent({
[className]: className,
[wrapClassName]: !!wrapClassName,
[haveMask]: !!haveMask,
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
}),
style: drawerStyle.value,
ref: vcDrawer,
@ -373,6 +386,7 @@ const Drawer = defineComponent({
return (
<VcDrawer
{...vcDrawerProps}
getContainer={getContainer.value}
v-slots={{
handler: props.handle ? () => props.handle : slots.handle,
default: () => renderBody(prefixCls.value),

View File

@ -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 | |