vue3实现鼠标右键显示菜单,点击其他地方消失问题

<div @contextmenu="contextmenu" class="contextmenu"></div>

e.preventDefault();   //默认触发事件的行为被 preventDefault() 取消了

  <div class="fixed-box" :style="fixedBoxStyleObject" v-show="isShowMenu" >
    <span>删除聊天</span>
  </div>

const contextmenu = (e) => {
  e.preventDefault();   //默认触发事件的行为被 preventDefault() 取消了
  fixedBoxStyleObject.left = e.clientX + 'px'
  fixedBoxStyleObject.top = e.clientY + 'px'
  isShowMenu.value = true
}

  <div tabindex="-1" class="fixed-box" :style="fixedBoxStyleObject" v-show="isShowMenu" @blur="isShowMenu = false" ref="fixedBoxRef">
    <span>删除聊天</span>
  </div>

const contextmenu = (e) => {
  e.preventDefault();   //默认触发事件的行为被 preventDefault() 取消了
  fixedBoxStyleObject.left = e.clientX + 'px'
  fixedBoxStyleObject.top = e.clientY + 'px'
  isShowMenu.value = true
  setTimeout(() => {
      fixedBoxRef.value.focus()
  },1)
}

.fixed-box{
  position: fixed;
  color: black;
  padding: 8px;
  width: fit-content;
  background-color: #F8F8F8;
}
.contextmenu{
	width:300px;
	height:300px;
  margin: 100px auto;
}