你可以将点击事件监听到 document 上,然后在方法中判断点击的位置是否在弹框内部或者是触发弹框的按钮。
vue
<template>
<div class="container">
<button @click="openPopup" class="popup-button">打开弹框</button>
<div v-if="isPopupOpen" class="popup" ref="popup">
<!-- 弹框内容 -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
isPopupOpen: false
};
},
methods: {
openPopup() {
this.isPopupOpen = true;
document.addEventListener('click', this.onClickOutside);
},
closePopup() {
this.isPopupOpen = false;
document.removeEventListener('click', this.onClickOutside);
},
onClickOutside(event) {
if (!this.$refs.popup.contains(event.target) && !event.target.classList.contains('popup-button')) {
this.closePopup();
}
}
}
};
</script>
<style>
.container {
position: relative;
}
.popup {
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 100px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
</style>
在这个示例中,当打开弹框时会在 document 上添加点击事件监听器,关闭弹框时会移除点击事件监听器。这样无论点击 container 内部还是外部的地方,都能触发关闭弹框的功能。