自定义下拉菜单的收缩实现

最新推荐文章于 2023-12-09 22:33:38 发布

tonyhzw

最新推荐文章于 2023-12-09 22:33:38 发布

阅读量2.3k

点赞数

分类专栏： web开发 vuejs学习面试题笔试题文章标签：百度前端笔试下拉框收起 vuejs

本文链接：https://blog.youkuaiyun.com/datou0529/article/details/69061309

版权

web开发同时被 3 个专栏收录

32 篇文章

订阅专栏

面试题

12 篇文章

订阅专栏

笔试题

5 篇文章

订阅专栏

本文介绍如何在VueJS中实现一个自定义下拉菜单的收缩功能，特别是在用户输入过程中突然想查看完整内容但不关闭下拉菜单的情况。通过设置遮罩层并监听鼠标操作来判断何时关闭下拉菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本功能第一次遇到是在百度2017年暑期实习生招聘时遇到的，当时的要求是：实现一个类似百度搜索时，输入给出候选词的功能。这个很容易，一般配合ul li 实现，但是有些特殊场景我当时并没有考虑到，如：

由于候选词都是模糊查询的，故当用户输入为空时，这时候模糊查询返回的结果可能并非为null，此时仍会显示候选词输入结果。即：无论何时，该下拉菜单都会显示。

这与自定义下拉菜单的实现类似，在大多数功能中，这种实现都ok，可以控制用户选择完之后，收缩下拉菜单（候选词），但是当用户在输入过程中，突然不想输入，而想看第一条数据时（大多数靠前的数据都会被遮挡），这时你会发现该菜单无法收缩。

这里常见的做法是：

在该html中设置一层mask，而将下拉菜单及相关的操作层置顶，只要检测到鼠标的操作在mask上，而不是下拉菜单层时，判定用户想关闭下拉菜单，此时再隐藏mask和下拉菜单。

故，以下部分给出vuejs中的实现代码：

<div class="navbar">
        <span>标签</span>
        <div class="mask" @click="dropUp" v-if="candicateArr.length>0"></div>
        <div class="search-bar">
          <Input class="category" v-model="formItem.category" name="category" placeholder="请输入类别..." @keyup.enter="onEnter" @input="onInput" ></Input>
          <ul>
            <li v-for="word in candicateArr" @click="chooseTag(word)">{{word.tagName}}</li>
          </ul>
        </div>
     </div>

.mask{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}
.navbar .search-bar{
  padding-left: 45px;
  margin-top: -40px;
  width: 100%;
  position: absolute;
  z-index: 1;
}

methods:{
    dropUp(event){
        if(event.target.className=='mask'){
          this.candicateArr = [];
        }
    }
}