vue中使用addEventListener和removeEventListener来实现点击空白处,隐藏弹框一类的组件

先看效果……
这里写图片描述
想做的效果就是,在‘我的产品’ 和‘交易管理’ ,出现后,点击页面的任何部位,关闭它们。

注意点
  • vue的@click方法的时候要阻止事件冒泡。vue的方法为@click.stop 例@click.stop=”clickMenu”
  • document.addEventListener(“click”,this.removeEvt)是给document绑定一个click事件,click时触发removeEvt方法
  • 当触发 click方法是,为document移除click事件。
template
<div class="os_navbar_main_left" :class="{'menuBg':menuBg}" @click.stop="clickMenu">
  <img class="os_navbar_main_left_menu" :src="menu" alt="" >
  <img class="os_navbar_main_left_logo" :src="logo" alt="">
  旅拼拼
  <div class="os_navbar_main_left_menuBox" v-if="isShow">
    <li @click.stop="clickDowMenu(0)" class="os_navbar_main_left_menuBox_title">我的产品</li>
    <li @click.stop="clickDowMenu(1)" class="os_navbar_main_left_menuBox_title">交易管理</li>
  </div>
</div>
script
<script>
import logo from '@/assets/images/OS_Logo.png'
import menu from '@/assets/images/OS_website_menu.png'
import menuClose from '@/assets/images/OS_website_menu-close.png'
import userPhoto from '@/assets/images/userPhoto.jpg'
export default {
  data () {
    return {
      userName:'',
      logo:logo,
      menu:menu,
      isShow:false,
      userPhoto:userPhoto,
      menuBg:false,
    }
  },
  methods:{
    clickMenu(){
    //点击菜单
      if(this.menu === menu){
        // 展开下拉菜单
        this.isShow = true
        // logo处变色
        this.menuBg = true
        this.menu = menuClose
        setTimeout(()=>{
        //展开菜单的时候添加到document的click事件
          document.addEventListener("click",this.removeEvt)
        },0)
      }else{
        this.hiedMenu()
      } 
    },
    //点击页面执行的方法
    removeEvt(){
      document.removeEventListener("click",()=>{})
      this.hiedMenu()
    },
    hiedMenu(){
      // 关闭下拉菜单
      this.isShow = false
      // logo处变白色
      this.menuBg = false
      this.menu = menu
    },
    clickDowMenu(index){
      if(index === 0){}else if(index === 1){}
      this.hiedMenu()
    },
  }
}
</script>
版权声明:本文为weixin_36934930原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_36934930/article/details/80458416