feat: drawer add rtl
parent
4eb8088645
commit
a1ac22443e
|
@ -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 | |
|
||||
|
|
|
@ -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),
|
||||
|
|
|
@ -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 | |
|
||||
|
|
Loading…
Reference in New Issue