需求:编写一个自定义的组件需要完成点击页面的其他非组件的地方的时候要把这个组件隐藏起来。
代码:
beforeMount() {//在DOM元素渲染之前开始监听mousedown事件
this._close = (e) => {
// 如果点击发生在当前组件内部,则不处理
if (this.$refs.closeSelect.contains(e.target)) {
return;
}
this.isShowSelectList = false;
};
document.body.addEventListener("mousedown", this._close);
},
beforeDestroy() {//在vue文件销毁的时候移除这个事件
document.body.removeEventListener("mousedown", this._close);
},