vue 用代码控制el-dropdown的展开和收起

最新推荐文章于 2024-05-27 23:12:23 发布
最新推荐文章于 2024-05-27 23:12:23 发布
阅读量1.5k 收藏 3
点赞数 2
分类专栏： 前端 vue 文章标签： vue.js 前端 javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55862073/article/details/128519230
版权

        错误尝试：

        因为el-dropdown默认触发方式是hover鼠标悬停，所以我第一个想到的方法是控制el-dropdown元素是否获得焦点的方式控制展开或者收起。

        比如想要el-dropdown展开，先通过ref找到元素，在调用focus（）方法主动获得焦点，就会展开。

        但是经过一通尝试，发现最后还是失败了。。。。。。

        正确方法1：

        调用show()和hide（）方法

      

 

 

         这样就可以顺利搞定啦

学习机器不会机器学习
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3 - Element Plus 下拉菜单 el-dropdown 阻止冒泡传递到上层触发事件，解决 dropdown 下拉菜单组件被容器元素包裹时点击事件触发，会连带触发外层包裹容器的点击事件
王佳斌
02-27 1999
vue3，element plus，el-dropdown，stop，command，使用.stop无效，下拉菜单组件，下拉菜单Dropdown，点击事件冒泡，@command如何绑定stop修饰符，阻止事件冒泡，使用el-dropdown下拉菜单阻止事件冒泡，阻止了点击事件冒泡，触发了父元素怎么办，click点击时带动了外层元素的点击事件咋办，如何解决vue3使用下拉菜单组件时，点击触发方式会连同上层div同时触发click点击，element plus组件自带的事件如何阻止其冒泡，阻止内层冒泡，将dro
element ui中的el-dropdown（下拉框）防止点一下就影藏的问题
qq_42208679的博客
12-24 2914
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
vue3 el-dropdown下拉框用逻辑控制
最新发布
最是人间留不住，朱颜辞镜花辞树。
05-27 273
用代码逻辑来控制下拉框的展开与收起。
vue 通过逻辑控制el-dropdown组件展开和收起
weixin_45966674的博客
11-30 2735
有些时候 我们下拉的内容并不是他本来的选项 用户选择后就没有关闭 这个时候 就需要我们在逻辑层开启或关闭他的菜单。我们现在el-dropdown上绑定一个ref 这样就可以在逻辑中控制他。el-dropdown在element ui中应用场景并不少。然后我们在逻辑端 就可以这样写。
vue 展开和收起
weixin_38673922的博客
08-24 1670
【代码】vue 展开和收起。
2022-06-17 工作记录--Vue-手动控制 el-dropdown 的显示和隐藏
weixin_48850734的博客
06-22 1603
手动控制 el-dropdown 的显示和隐藏
Vue3通过 directive 实现 el-dropdown下拉菜单项最小宽度等于内容宽度
m0_46627730的博客
09-12 1361
这两种方式设置最小宽度是需要提前知道内容宽度的值，那么就得在编码的时候限定一个值，限制性太大了。配置项是可以实现效果的，所以我们只需要解决内容宽度计算并且设置下拉框最小宽度即可。并不提供配置项让我们实现下拉菜单项最小宽度等于内容宽度，但我们能发现它提供了。渲染的时候进行自定义计算，获取内容宽度的同时设置下拉框选项的最小宽度。这个 API 可以让我们自定义指令，使。配置项来实现想要的功能呢？通过实现这个效果，学会了如何使用。这种形式进行最小宽度的设置？答案明显是可行的，但有个。，感觉还是很有收获的。
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
10-15
在使用`van-dropdown-menu`和`van-dropdown-item`组件时，基础代码如下： ```html <van-dropdown-menu> <van-dropdown-item v-model="value" :options="developList" /> </van-dropdown-menu> data() { return {...
vue+element搭建后台小总结 el-dropdown下拉功能
10-16
主要为大家详细介绍了vue+element搭建后台小总结，el-dropdown下拉功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue el-tree 默认展开第一个节点的实现代码
10-15
主要介绍了vue el-tree 默认展开第一个节点的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
vue3通过el-dropdown实现动态菜单切换页面
青莳的博客
11-29 1503
接下来是菜单页面menu.vue。首先是主页index.vue。
vue3使用el-dropdown的坑！！！（修改el-dropdown-menu的样式）
booo_ooom的博客
10-17 1687
vue3使用el-dropdown的坑！！！（修改el-dropdown-menu的样式）
el-dropdown 默认展开下拉内容_今日源码：Flutter下拉选项框、折叠效果源码
weixin_29721821的博客
01-12 1243
Flutter下拉选项框DropdownButton，支持AppBar上面添加DropdownButton({ Key key, @required this.items, // 下拉选项列表 this.selectedItemBuilder, // 选项 item 构造器 this.value, // 选中内容 thi...
踩坑记9 vue3全屏、el-dropdown高度设置等
Alloom的博客
08-03 2335
2021.8.3 做一些界面样式切换的小功能。 坑28（css、选择器、统一间距）：目标是选择一个父元素的全部子元素，通过margin设置统一的左右间距。使用的选择器是element > *，其中'>'表示在element的子元素中选择，'*'表示选择所有元素，相关代码如下。 .setMenuBox{ display: flex; flex-direction: row; align-items: center; } .setMenuBox > *...
vue3 中使用el-dropdown时，slot报错解决方法
前端打工人的博客
02-03 2161
vue3 中使用el-dropdown时，页面显示报错，vscode也会有报错提示 是因为vue 3.x 增加了v-slot的指令，去掉了原来的slot，slot-scope属性。
Vue 解决el-dropdown在table中与el-button配合使用不展示的问题
CCC_chtt的博客
04-24 1405
解决el-dropdown，el-button配合使用的bug。
el-dropdown 默认展开下拉内容_【Excel技巧1001-29】- 0基础5分钟详细动画教你制作二级联动下拉菜单...
weixin_39956022的博客
01-14 586
前面我们已经分享了很多次关于一级下拉菜单的，具体链接文末给出今天我们来聊聊更加实用的Excel中二级联动菜单问题！文末送上强化版，解决重选二级不更新的难题废话不讲，直奔主题​动画效果：详解制作教程：1、定义一级省份名称，见动画演示​操作细节：选择省份区域，在名称框中输入省份，按下CTRL+Enter实际操作过程中，也可以不定义名称，直接引用，这里不展开2、定位有效的二级数据区域，排除空单元格影响，...
el-dropdown 默认展开下拉内容_EXCEL表格太大，如何将内容打印在一页？教你2种方法！...
weixin_42513215的博客
01-16 492
Excel是一个非常重要的办公软件，除了制作表格过程中的一些技巧之外，在打印时也是有一些技巧的。一些办公软件使用者经常会碰到这样的一个问题：Excel表格中的内容太多，但是老板却要求只打印在一页上，该怎么办呢？如何将内容打印在一页中？这里小雨为大家介绍两种方法。1方法一：页面设置在工具栏中定位到【页面布局】工具组，然后找到“打印标题”工具。　进入”页面设置“页面。　　在这个页面有4个选项...
el-Dropdown 两个下拉框之间的动态绑定 实现默认选中值
一起加油吧~
12-24 4802
有时候我们在项目中可能多个下拉框之间的数据具有一个级联绑定关系，通过切换某个下拉框的选项值之后，另一个下拉框的中的选项也随之改变。 这个在项目中是经常使用到的一种场景，今天我来分享分享我们具体的实现和需要注意的一些点
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值