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=