当前位置: 移动技术网 > IT编程>脚本编程>vue.js > vue下拉框点击空白区域关闭弹框

vue下拉框点击空白区域关闭弹框

2020年10月23日  | 移动技术网IT编程  | 我要评论
组件当前点击 如果采取冒泡阻止 .stop(页面只引用单个组件的时候)<template> <div class="comtainer"> <div @click.stop="handleInput" class="select-selection" ref="selectSelection"> </div> </div><template>Document 事件绑...

组件当前点击 如果采取冒泡阻止 .stop(页面只引用单个组件的时候)

<template>
  <div class="comtainer">
    <div
      @click.stop="handleInput"
      class="select-selection"
      ref="selectSelection">
    </div>
  </div>
<template>

Document 事件绑定点击区域body,然后将组件设置为不显示

mounted() {
    var that =this
    document.addEventListener("click",()=>{
      获取组件that
      设置为不显示即可
    });
}

当页面引用多个组件复用时候,为了不干扰其他组件(组件冒泡要去除)

当点击空白区域在判断,空白区域是否在当前组件dom内 (dom包含关系this.$el.contains、e.target)

mounted() { 
      let that=this
      document.addEventListener('click', (e) => { 
      	if (!that.$el.contains(e.target)) this.showMenuList = false 
      }) 
    }

 

本文地址:https://blog.csdn.net/qq_32615575/article/details/109242867

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网