点击其他位置弹框消失

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

 给ul注册事件 

@blur="onClose" tabindex="-1"   一定要定义tabindex
 nextTick(() => {
    const curMenu = contextMenu.value
    contextMenu.value.focus(
{ preventScroll: true }
)
})

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

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

  tabindex 用法说明 - 掘金 (juejin.cn)

posted @ 2023-05-12 14:49  梦蝶庄周  阅读(42)  评论(0编辑  收藏  举报