document.body.addEventListener 实现点击页面空白部分关闭弹窗

方法一

<div class="order"  @click.stop="ordershow=!ordershow">
点击我显示弹窗
</div>

点击页面空白部分隐藏弹窗

<div class="order-all" v-show="ordershow">
这里是弹窗
</div>


data() {
    return {
      ordershow: false,
      }
 }
 
 watch:{
    ordershow (val) {
      if (val) {
        document.body.addEventListener('click', () => {
          this.ordershow = false
        })
      } else {
        document.body.removeEventListener('click', () => {})
      }
    },
  },

方法二

<div class="item-one"></div>

mounted() {
    window.addEventListener('click', this.handleNoItem)
  },
  beforeDestroy() {
    window.removeEventListener('click', this.handleNoItem)
  },
  methods: {
    //点击其他位置关闭编辑模糊框
    handleNoItem(event) {
      const isOutsidePopup = !event.target.closest('.item-one')  //通过class锁定要关闭的弹窗
      if (isOutsidePopup) {  //我这里是关闭所有的list弹窗，可视情况而关闭单个弹窗
        // 遍历 list数组，关闭所有弹窗
        this.list.forEach((obj) => {
          this.$set(obj, 'select', false)
        })
      }
    },
  }