vue3 点击空白处关闭弹框

写一个控制弹框出现的方法 用popoverFlag变量控制

  const popoverFlag= ref(false)
    const popoverShow = () => {
      chartState.getData(0)
      popoverFlag.value = true
    }

html 

在弹框和按钮处加一个@click.stop

就相当于点击除了弹框和按钮的地方其他的地方都会关闭弹框

 Vue3用的是onMounted和onUnmounted

  onMounted(() => {
      window.addEventListener('click', chartState.closeTable)
    })

    onUnmounted(() => {
      window.removeEventListener('click', chartState.closeTable)
    })//chartState.closeTable就是关闭弹框的方法

附：

直接关闭会太生硬

加上一个transition 让他渐变出现和消失

.opa-fade-enter-active,
.opa-fade-leave-active {
  transition: all 0.5s ease;
}
.opa-fade-enter-from,
.opa-fade-leave-to {
  opacity: 0;
}