vue3 点击空白处关闭弹框

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

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

html 

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

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

 <div
      :class="['btn', 'btn-inner', popoverFlag && 'popverActive']"
      @click="popoverShow()"
      @click.stop
    ></div>
    <transition name="opa-fade">
      <div
        :class="[
          'table-wrapper',
          popoverFlag && 'tableInner',
        ]"
        v-if="popoverFlag"
        @click.stop
      >
     </div>
  </transition>

 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;
}