vue监听关闭弹窗

vue事件监听关闭弹窗

<button @click="showCart = true">打开购物车</button>
<div class="my-float-cart" ref="myDiv" v-show="showCart">
	购物车内容这里忽略代码
</div>

// 监听showCart
watch: {
    'showCart': function (v) {
      let _this = this
      if (v) {
        // alert(this.showCart)
        setTimeout(function () { // 防止时间差
          document.addEventListener('click', _this.listener)
        }, 50)
      } else {
        document.removeEventListener('click', this.listener)
      }
    }
  }
// 监听事件
methods:{
    listener (event) {
      const e = event || window.event
      if (this.$refs.myDiv && !this.$refs.myDiv.contains(e.target)) {
        this.showCart = false // 点击目标myDiv以外的地方关闭ref="myDiv"这个弹窗
      }
    }
 }

如果对应的refs.myDiv是数组【即<div class="my-float-cart" ref=