vue,点击除组件外的元素，自动关闭组件或元素

最新推荐文章于 2024-05-24 21:01:54 发布

dxfan5

最新推荐文章于 2024-05-24 21:01:54 发布

阅读量1.3k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/dxfan5/article/details/122472431

版权

页面中，设定模板的ref值：

<div class="pop-box" ref="userRef" >
    <span class="pop-close iconfont icon-close" @click="hidePop"></span>
    
    <keep-alive>
      <component :is="currentComponent" @changeView="changeView" />
    </keep-alive>
  </div>

在该组件的钩子函数中调用点击事件：

mounted(){
    document.addEventListener('click',this.outClick)
  },

方法调用：

// 点击外部收起下拉选框
    outClick(e){
      let userRef= this.$refs.userRef;
    //user-btn 与 iconfont icon-renwu  这两个点击使组件弹出的按钮元素
      if(e.target.className=='user-btn' || e.target.className=="iconfont icon-renwu"){
        return;
      }
      try{
        if(userRef && !userRef.contains(e.target) && this.showUser ){
         this.showUser =false
      }
      }catch(err){}
      
    },

同时，在该弹出组件里面的所有点击事件，都需要使用
@click.stop ="funcName"

文章用户记录学习开发vue的记录~
错误及不足之处请指教~
加油！