Web右键菜单contextMenu封装
时间：2023-03-28 12:31:13
HTML
自己封装的一套右键菜单组件，id必须唯一且一致，不能以数字开头，否则queryselector会报错。contextmenu.jsimportReact,{Fragment,useEffect,useMemo}from"react";import"./contextMenu.less";//和的id必须唯一且一致，id必须以一封信。如果以开头的数字，querySelector会有问题functionContextMenu(props){const{id,options}=props;consthandleClick=(ev,onClick)=>{if(onClick&&typeofonClick=="function"){onClick(ev);};if(/^\d+/.test(id)){console.warn("ID应该以字符串开头！");返回;}让dom=document.querySelector(`#${id}`);如果（dom）{dom.style.display=“无”；}}constrenderLi=useMemo(()=>{returnoptions&&options.map((item,index)=>{const{label,onClick}=item;returnhandleClick(ev,onClick)}>{label}})},[选项]);返回(
)}letclickIds={};functionContextMenuTrigger(props){const{children,id}=props;useEffect(()=>{if(!clickIds[id]){document.addEventListener("mousedown",onMouseDown,false);clickIds[id]=1;}return()=>{document.removeEventListener("mousedown",onMouseDown,false);clickIds={};}},[])constonMouseDown=(ev)=>{if(/^\d+/.test(id)){console.warn("ID应该以细绳！”）;返回;}让dom=document.querySelector(`#${id}`);如果(dom){让clientRect=dom.getBoundingClientRect();const{clientX,clientY}=ev;const{x,y,宽度,高度}=clientRect;如果(!(clientX>=x&&clientX<=x+width&&clientY>=y&&clientY<=y+height)){dom.style.display="none";}}}constonContextMenu=(ev)=>{if(/^\d+/.test(id)){console.warn("ID应该以字符串开头！");返回;}让dom=document.querySelector(`#${id}`);如果(dom){dom.style.display="块";dom.style.left=ev.clientX+"px";dom.style.top=ev.clientY+"px";}ev.preventDefault();}constnewChildren=React.cloneElement(children,{onContextMenu:onContextMenu});返回<片段>{newChildren}</Fragment>}ContextMenu.defaultProps={options:[],}export{ContextMenu,ContextMenuTrigger};contextmenu.less.contextMenu{position:fixed;背景色：白色；边框：1px实心#888888；盒子阴影：2px2px3px0px#888888；z-指数：999；游标：默认；ul{li{填充：5px；&:hover{背景颜色：#dddddd;}}}}
