elementui下拉菜单不同选项支持点击后是否隐藏菜单栏

最新推荐文章于 2024-07-01 09:10:14 发布
最新推荐文章于 2024-07-01 09:10:14 发布
阅读量2.4k 收藏 4
点赞数 2
分类专栏： vue 文章标签： js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shenqiyuhan/article/details/115076776
版权
本文介绍了如何在ElementUI中手动控制下拉菜单的显示和隐藏，特别是在点击菜单项后保持菜单栏的状态。文章背景是一个需求，即点击特定选项后需要隐藏下拉菜单。尝试使用`hide-on-click`属性未达到预期效果，然后通过查找组件源码，发现可以通过修改dropdown-menu的`showPopper`属性来实现手动控制下拉菜单的显隐。

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

elementui下拉菜单手动控制下拉菜单显隐

背景:今天有一个下拉菜单的需求是这样的,要求点击我的信息后隐藏下拉菜单栏,点击切换用户后选择用户隐藏下拉菜单栏

在这里插入图片描述

点击切换用户

在这里插入图片描述

下拉组件是用elementui做的因此翻了一下文档,得到如下解决方案

菜单隐藏方式

可以hide-on-click属性来配置。

下拉菜单默认在点击菜单项后会被隐藏，将hide-on-click属性默认为false可以关闭此功能。

那么点击el-dropdown-item切换hide-on-click属性的属性岂不美哉,easy

<el-dropdown-item @click.native="myInfoFn" ref="myInfo">
            我的信息
</el-dro
最低0.47元/天 解锁文章
vue递归组件实现elementUI多级菜单
蜗牛~~
11-04 2541
先看效果： 一、子组件 <template> <div class="myDiv"> <!-- 这里的listAll用于接收父组件传递进来的菜单列表 --> <template v-for="(item,i) in listAll"> <!-- 有child就显示child的下拉型菜单，有小箭头 --> <el-submenu :index=".
ElementUI侧边栏导航菜单隐藏显示问题
weixin_30793643的博客
04-09 1万+
场景：后台系统，实现侧边栏的隐藏显示功能 使用ElementUI布局容器时 需要注意的情况 在使用<el-aside>标签时，默认的宽度是60px。 如果要实现隐藏显示的话，则需要添加width="initial"属性 <el-aside width="initial"></el-aside> 复制代码使用自带的隐藏显示功能时 需要注意的情况 设置侧边栏宽度...
element ui中的el-dropdown（下拉框）防止点一下就影藏的问题
qq_42208679的博客
12-24 3297
element ui中的el-dropdown（下拉框）防止点一下就影藏的问题 当使用el-dropdown下拉框时，下拉框的每项中，可能需要加入@click、@change或复选框等事件，而el-dropdown-item的事件触发时，el-dropdown下拉框总是会收缩，很不合理。 官网 <el-dropdown trigger="click" placement="left"> <span class="el-dropdown-link"> <button
自定义指令下拉菜单隐藏(点击外部指令隐藏)
weixin_45356397的博客
09-07 696
自定义指令下拉菜单隐藏。
【elementui】el-dropdown的代码写法的显示和隐藏
bbt953的博客
07-01 637
el-dropdown的代码写法的显示和隐藏
vue项目修改element-ui的el-dropdown的显示隐藏
Wehter的博客
10-19 6642
项目需求 通过点击小铃铛，显示dropdown的el-dropdown的el-dropdown-menu，也就是白色背景的框 再次点击消息接收管理实现另一个菜单的出现和隐藏，同时把el-dropdown-menu隐藏 其实这个好实现，直接把消息通知和消息接收管理写入一个el-dropdown-item标签中就行,点击就隐藏 这一项是element默认为true的 <el-dropdown-menu slot="dropdown" class="project-dropdown" :style="{
elementUI el-select取消/隐藏下拉框 随机抽取人员
m0_64491262的博客
10-20 2895
取消el-select下拉框 随机选择人员
ElementUI之首页导航及左侧菜单（模拟实现）
09-26
ElementUI包含了诸如按钮、表格、弹框、提示、下拉菜单、导航栏、时间选择器等常见UI元素，极大地简化了前端开发过程。 要实现"首页导航及左侧菜单"，我们首先需要设置布局。ElementUI提供了一个名为`...
elementui菜单栏菜单栏保持高亮
01-12
为了确保ElementUI菜单栏中选中的菜单项能够持续高亮显示，在不同场景下的解决方案如下： #### 横向菜单 对于横向菜单，当只有一个菜单时，点击该菜单会使其高亮。如果有二级下拉菜单，则点击任意一项都会让对应的...
elementui菜单栏权限
最新发布
01-23
### 使用 ElementUI 实现菜单栏权限管理 为了实现基于角色的菜单显示逻辑，在前端可以采用 Vue.js 结合 ElementUI 来完成这一功能。通过定义不同的路由配置以及对应的访问级别，可以根据用户的权限动态加载相应的...
elementui的隐藏属性
qq_33455294的博客
11-25 1522
日常寻找并记录elementUI官方文档中未提及的隐藏属性
VUE+ElementUI模式下，实现菜单的显示与隐藏
热门推荐
csdn_jy的博客
12-27 4万+
     最近这个需求是，由于查询条件太多，想将一部分查询条件先隐藏起来，需要时再点击显示按钮进行展示。 我们的前端环境是vue+ElementUI的，查阅了官网案例http://element-cn.eleme.io/#/zh-CN/component/collapse 只找到了Collapse 折叠面板，由于里面一些组件是写死的，不能进行个性化修改，所以不能满足现在的需求，只能放弃！ 我...
el-dropdown 下拉菜单 结合JQ做鼠标移入显示 移出隐藏事件
zhang_gt的博客
04-21 2200
鼠标移入显示下拉菜单按钮,移出隐藏下拉菜单按钮功能实现
element-ui点击el-dropdown-item后，el-dropdown-menu二次触发显示的问题
qq_21597979的博客
06-07 1967
工作中遇到的问题，点击el-dropdown-item，打开新页面后，menu再次触发显示。 触发菜单显示到点击选项期间，鼠标会经过这之间的红色区域，它不属于dropdown，所以此时会先触发hide，再次触发show，show默认是250ms的延时，所以当这个过程鼠标过快时，会发生二次显示的情况。我的解决办法就是 继承原来的代码，重写点击选项的方法，再触发点击后清除定时器clearTimeout(this.timeout)，这样就可以了。
Element_Ui组件隐藏功能与采用样式
weixin_45655721的博客
04-08 1005
Element_Ui组件隐藏功能与采用样式
element ui中的el-dropdown（下拉框）点一下就隐藏
qq_46617584的博客
02-09 1872
element ui中的el-dropdown（下拉框）点一下就隐藏
【已解决并给出解释】el-dropdown-item的点击事件
qq_41263217的博客
07-31 1399
在el-dropdown-item上添加@click事件，点击后没有任何反应。若在@click后添加native修饰符，则可解决问。 <el-dropdown :hide-on-click="false"> <span class="el-dropdown-link"> <h4 style="margin: 0 10px">小康 | 管理员</h4> </span> <el-dropdown-menu s.
elementui中导航组件点击二级菜单页面跳转但是二级菜单关闭问题
m0_51073906的博客
07-20 2265
elementui中导航组件库 多个一个菜单中包含二级菜单 第一次点击二级菜单页面跳转但是二级菜单关闭功能 解决方法： :default-active="$route.path" :unique-opened="true" 根据路由判断是否展开当前选中项 ...
vant组件自定义DropdownMenu下拉菜单
weixin_46058863的博客
02-03 1万+
vant组件自定义DropdownMenu下拉菜单（被自己的智商哭晕的一天！） html： 想要实现的效果：点击确定窗口消失，点击筛选正常显示隐藏 看了一下vant官方文档： 完全可以实现！！！ 在自己写的过程中报错就没在页面上看！ 浪费了一下午！ 代码： private confirm () { const refselect: any = this.$refs.itemselect; refselect.toggle(); } ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值