test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-12-02 12:08:13 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

用个简单的动画提示用户这不是系统右键菜单

Browse Source
This commit is contained in:
liaoxuezhi 2019-11-24 11:08:10 +08:00
parent 64f22a74a0
commit 46ba154e5a
2 changed files with 33 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
scss/components/_context-menu.scss
View File

@ -1,3 +1,18 @@
// 为了提示用户这不是系统菜单。
@keyframes contextMenuInSpecial {
from {
transform: scale3d(1, 1, 1);
}
50% {
transform: scale3d(1.05, 1.05, 1.05);
}
to {
transform: scale3d(1, 1, 1);
}
}
@keyframes contextMenuIn {
from {
opacity: 0;
@ -24,7 +39,8 @@
}
&.in {
animation-name: contextMenuIn;
animation-name: contextMenuInSpecial;
animation-duration: 0.5s;
}
&.out {

32
src/components/ContextMenu.tsx
View File

@ -73,13 +73,13 @@ export class ContextMenu extends React.Component<
}
componentDidMount() {
document.body.addEventListener('click', this.handleOutClick, true);
// document.body.addEventListener('click', this.handleOutClick, true);
document.addEventListener('keydown', this.handleKeyDown);
}
componentWillUnmount() {
ContextMenu.instance = null;
document.body.removeEventListener('click', this.handleOutClick, true);
// document.body.removeEventListener('click', this.handleOutClick, true);
document.removeEventListener('keydown', this.handleKeyDown);
}
@ -103,20 +103,20 @@ export class ContextMenu extends React.Component<
});
}
@autobind
handleOutClick(e: Event) {
if (
!e.target ||
!this.menuRef.current ||
this.menuRef.current.contains(e.target as HTMLElement)
) {
return;
}
if (this.state.isOpened) {
e.preventDefault();
this.close();
}
}
// @autobind
// handleOutClick(e: Event) {
// if (
// !e.target ||
// !this.menuRef.current ||
// this.menuRef.current.contains(e.target as HTMLElement)
// ) {
// return;
// }
// if (this.state.isOpened) {
// e.preventDefault();
// this.close();
// }
// }
handleClick(item: MenuItem) {
item.disabled ||