drawer overlay逻辑优化

This commit is contained in:
rickcole 2020-05-08 20:05:36 +08:00
parent 5ced9c0b72
commit cfa99abde6
2 changed files with 6 additions and 2 deletions

View File

@ -115,6 +115,8 @@
} }
&.#{$ns}Drawer--noOverlay { &.#{$ns}Drawer--noOverlay {
pointer-events: none;
.#{$ns}Drawer-close svg { .#{$ns}Drawer-close svg {
margin-top: px2rem(2px); margin-top: px2rem(2px);
width: px2rem(20px); width: px2rem(20px);

View File

@ -69,12 +69,14 @@ export class Drawer extends React.Component<DrawerProps, DrawerState> {
if (this.props.show) { if (this.props.show) {
this.handleEntered(); this.handleEntered();
} }
document.body.addEventListener('click', this.handleRootClick, true);
} }
componentWillUnmount() { componentWillUnmount() {
if (this.props.show) { if (this.props.show) {
this.handleExited(); this.handleExited();
} }
document.body.removeEventListener('click', this.handleRootClick, true);
} }
contentRef = (ref: any) => (this.contentDom = ref); contentRef = (ref: any) => (this.contentDom = ref);
@ -105,7 +107,7 @@ export class Drawer extends React.Component<DrawerProps, DrawerState> {
}; };
@autobind @autobind
handleWidgetClick(e: React.MouseEvent) { handleRootClick(e: MouseEvent) {
const {classPrefix: ns, closeOnOutside, onHide} = this.props; const {classPrefix: ns, closeOnOutside, onHide} = this.props;
if ((e.target as HTMLElement).closest(`.${ns}Drawer-content`)) { if ((e.target as HTMLElement).closest(`.${ns}Drawer-content`)) {
return; return;
@ -159,7 +161,7 @@ export class Drawer extends React.Component<DrawerProps, DrawerState> {
}, },
className className
)} )}
onClick={this.handleWidgetClick} // 其实不需要插件,直接写逻辑吧 // onClick={this.handleWidgetClick} // 其实不需要插件,直接写逻辑吧
> >
{overlay ? ( {overlay ? (
<div <div