vue自定义下拉菜单，除了指定按钮可以展开和关闭，点击其他地方隐藏

最新推荐文章于 2024-07-15 17:50:58 发布

码代码的阿宅

最新推荐文章于 2024-07-15 17:50:58 发布

阅读量1.4k

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_38394175/article/details/107861618

版权

1.html

<div class="input_box">
  <span class="articleTypeBox">{{categoryCount}}</span>
  <div class="choiceTypeBox">
    <span class="activeMenus" v-if="choiceType">
      <img src="~@/images/article/typeDefualt.png" @click.stop="openMenus" class="typeChoiceIcon">
    </span>
    <div class="typeChoiceMenusBox" v-else>
      <div class="typeMenusBox">
        <span class="activeMenus">
          <img src="~@/images/article/typeDefaultClose.png" @click.stop="closeMenus" class="typeCloseIcon">
        </span>
      </div>
    </div>
  </div>
</div>

2.dom

<script>
export default {
  data () {
    return{
      screenStatus:false,
      categoryCount: '',
      choiceType: true
    }
  },
  mounted () {
    //判断点击的是否是类型下拉区域
    document.addEventListener('click', this.bodyCloseMenus)
  },
 destroyed () {
    document.removeEventListener('click', this.bodyCloseMenus)
  },
  methods:{
    //页面其他区域点击关闭分类
    bodyCloseMenus () {
      let self = this
      if (self.choiceType == false) {
        self.choiceType = true
      }
    },
    //打开分类
    openMenus () {
      this.choiceType = false
    },
    //关闭分类
    closeMenus () {
      this.choiceType = true
    },
  }
</script>

3.效果图
在这里插入图片描述