点击其他位置弹框消失

Posted 2023-05-12 梦蝶庄周

<ul v-if="isShow" class="context-menu" ref="contextMenu" @blur="onClose" tabindex="-1" :>
  ....
  </ul>

　给ul注册事件

 nextTick(() => 
    const curMenu = contextMenu.value
    contextMenu.value.focus()
）

  点击其他位置失去焦点事件

const onClose = () => 
  isShow.value = false

　　

鼠标移走时，鼠标悬停hover样式不消失

问题描述

在使用分页组件时，点击页码跳转，在页码较多时点击当前显示的最大的页码，会加上active样式，但是新加载出来的页面也会加上‘active’。样式并且在点击其他位置时，该样式会消失
例如图一中点击第‘8’页，第‘8’页会加上‘active’样式，后面加载出来第九页第十页，第十页也会有‘active’样式。如图二：

图一

图二

 

问题分析

在点击了第‘8’页时，新加载出第九页第十页，此时鼠标的位置切换到了第十页的位置，由于在样式中加了:focus伪类会自动添加点击后的效果，变造成了上述的问题

 

解决办法

删除样式的:focus伪类，或者将:focus样式改成当前未选中页码的样式，将原来的:focus覆盖。