在工作中我们可能会遇到原生手写的Model,我们希望他的表现状态为点击除它的空白处让它消失(隐藏)。
这里提供两个思路来解决这个对应的问题
1.首先如果的全屏的Model我会推荐你直接使用click方法写在父组件上面,这样来操作它的表现状态
2.如果是非全屏Model而我们想要它的表现状态为点击它之外的所有地方都希望能够关闭这个Model,我们可以用以下代码进行是实现
1.给window.全局绑定一个mouseup的事件让鼠标在点击页面的所有地方都能够触发这个事件
2.主要是使用了Jquery的is和has方法来判断这个点击的目标元素是不是Model,如果是那么is和has()方法则会检测到,不执行逻辑操作,如果不是执行对应的逻辑代码。
3.这样就可以实现Model层点击空白地方,让Model层消失了。
window.addEventlister('mouseup',function(ev){
let _currentBox = $('目标区域');
if(_currentBox.is(ev.target) && _currentBox.has(ev.target).length === 0){
//具体执行逻辑代码的地方
this.switchTab = false
}
})