实现效果:弹窗、下拉菜单、提示框等在没有遮罩层时可以通过监听点击事件来控制弹窗、下拉菜单等的显示隐藏。
思路:监听mouseup松开左键时,判断控制pop元素显示隐藏的变量show是否为true(显示状态),再判断点击的位置是否是pop元素,如果不是则隐藏pop元素
示例
mounted() {
document.addEventListener("mouseup", e => {
var pop = document.getElementById("pop");
if (this.show) {
if (!pop.contains(e.target)) {
this.show = false;
}
}
});
}