[element-ui] el-dropdown+el-tooltip 提示信息不显示

最新推荐文章于 2024-10-15 13:52:03 发布
原创 最新推荐文章于 2024-10-15 13:52:03 发布 · 1.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本文档展示了在Vue项目中遇到下拉菜单提示信息不显示的代码片段，并提供了修复方案。通过在`<el-tooltip>`内添加一层`<span>`标签，成功使得提示信息正常显示。同时，代码示例中包含了使用`el-dropdown`组件创建下拉菜单，以及使用`$message`方法处理点击事件的方法。

如下代码，提示信息不显示：

<el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
最低0.47元/天 解锁文章
vue中使用el-dropdown
吴小花的博客
03-09 1万+
点击【更多】弹出如下选项 使用el-dropdown <el-dropdown @command=" (command) => { handleCommand(command, scope.$index, scope.row); } " > <el-link type="pri..
Vue3 - Element Plus 下拉菜单 el-dropdown 阻止冒泡传递到上层触发事件，解决 dropdown 下拉菜单组件被容器元素包裹时点击事件触发，会连带触发外层包裹容器的点击事件
🏆 前端领域优质创作者
02-27 3581
vue3，elementplus，el-dropdown，stop，command，使用.stop无效，下拉菜单组件，下拉菜单Dropdown，点击事件冒泡，@command如何绑定stop修饰符，阻止事件冒泡，使用el-dropdown下拉菜单阻止事件冒泡，阻止了点击事件冒泡，触发了父元素怎么办，click点击时带动了外层元素的点击事件咋办，如何解决vue3使用下拉菜单组件时，点击触发方式会连同上层div同时触发click点击，elementplus组件自带的事件如何阻止其冒泡，阻止内层冒泡，将dro
[element-ui] el-dropdown @command 增加额外参数
qq_14993591的博客
03-27 551
【代码】[element-ui] el-dropdown @command 增加额外参数。
element下拉菜单 command 传递多个值
mygoes
01-14 1983
element 的下拉菜单 command 传递多个值 核心代码： <el-dropdown-item :command="{row:boy, command:'1'}">传多个值</el-dropdown-item> 完整代码： <el-dropdown @command="handleCommand"> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down e
element-ui点击el-dropdown-item后，el-dropdown-menu二次触发显示的问题
qq_21597979的博客
06-07 2177
工作中遇到的问题，点击el-dropdown-item，打开新页面后，menu再次触发显示。 触发菜单显示到点击选项期间，鼠标会经过这之间的红色区域，它不属于dropdown，所以此时会先触发hide，再次触发show，show默认是250ms的延时，所以当这个过程鼠标过快时，会发生二次显示的情况。我的解决办法就是 继承原来的代码，重写点击选项的方法，再触发点击后清除定时器clearTimeout(this.timeout)，这样就可以了。
Element-UI自学实践（一）
weixin_40017062的博客
08-13 676
Element-UI自学实践
element-ui本地编译后的js包
07-27
除了这些基础组件，Element UI 还提供了大量的其他组件和实用功能，如表单组件（Input、Select、Checkbox、Radio等）、导航组件（Menu、Breadcrumb、Pagination等）以及弹窗组件（Popover、Tooltip等）。这些组件都...
element-ui-api-2.x版本.zip
10-10
- **Tooltip**：提示信息，当鼠标悬停在元素上时显示。 - **Select**：下拉选择器，可以实现单选和多选功能。 - **Dropdown**：下拉菜单，包含多个可选选项。 - **Navbar/Breadcrumb/Tabbar**：导航组件，用于...
element ui 分页器 el-select-dropdown el-popper偏移
最新发布
08-15
在使用 Element UI 的 `el-pagination` 组件时，若涉及 `el-select` 下拉选择器（即 `el-select-dropdown`）和 `el-popper` 的布局调整，可能会遇到下拉菜单或弹出层的位置偏移问题。这类问题通常由 `el-popper` 的...
elementui中下拉command事件传递多个参数
weixin_47076606的博客
12-09 1649
command事件中默认传递一个参数，即你每个下拉选项el-dropdown-item中设定的command的值，怎么样传递多个参数呢？ 我的项目中el-dropdown在一个遍历循环中，需要将index角标将参数传给@command="handleCommand"事件中。 解决办法：动态设置每个el-dropdown-item中command的值 <el-dropdown @command="handleCommand"> <span clas
element-ui el-select组件 传递多个数据
Binglianxiaojiao的博客
10-15 689
el-select下拉框在项目中是常用到的一个下拉框组件，通过v-model绑定对应的值即可简单完成使用。 但是往往会在一些业务需求上，我们得记录多个值时，单独绑定一个值往往已经满足不了我们的开发需求。
使用VUE下拉框组件el-dropdown-item，设置click点击事件，会触发两次
qq_42955997的博客
04-07 7757
项目场景： 毕设项目 问题描述 问题帖链接：https://ask.youkuaiyun.com/questions/7683469?answer=53747393&username=qq_42955997 原因分析： 使用的组件是elementplus的el-dropdown下拉框组件，官方并没有提供@click的方法，所以可能出现一些未知的问题。 解决方案： 这里官方提供了一个方法叫commond，官方说明是“点击菜单项触发的事件回调”，这正是我们需要的。解决方式参考帖子：https://blog.csdn
elementUI中el-dropdown的command如何传递多个参数
qq_42931285的博客
07-02 1620
elementUI中el-dropdown的command如何传递多个参数
全屏下，elelmentplus的el-dropdown和el-tooltip无法显示
WOMENshiNIDE的博客
07-12 1287
在官方给出的el-tooltip中有一个属性为。的官方文档中未给出此属性，但使用后依然生效，将其值设置为false即可。
vant 多个DropdownMenu重叠问题
sophia_xiaoma的专栏
11-30 2004
场景： 页面从上到下多个DropdownMenu，点击下方下拉框不选择任何数据，直接再点击上方下拉框，会出现下拉框重叠问题，如图： 方法： 通过 ref 可以获取到 DropdownItem 实例并调用实例方法，详见组件实例方法 例： <van-dropdown-menu> <van-dropdown-item ref="dropdown0" v-model="value0“ :options="option0" @open="open('dropdowm0')" /&
element下拉框选择组件，单个选项传多个值
ramsey17的博客
06-25 307
el-button type="primary" @click="sureDia('form')">提 交取 消label="人员角色"
vue中在使用keep-alive时，会出现在页面跳转后el-tooltip或el-dropdown不消失的问题以及解决方法
zqhs5599的博客
07-26 2264
1、keep-alive会多出两个生命周期，我们可以在deactivated中销毁当前页面中所有的tooltip或dropdown；其中2、3比较好，可以只写一处代码，就可实现整个项目都能移除el-tooltip或el-dropdown的功能。2、在路由守卫中，在页面跳转时都会执行这里的代码，然后移除即可；3、在App.vue中，监听路由切换事件，然后移除即可。写法上有多种，还有更多在这就不写了，希望对你有帮助。
vue页面或者网页全屏后，el-dropdown和el-tooltip无法显示
WOMENshiNIDE的博客
05-15 2028
【代码】vue页面或者网页全屏后，el-dropdown和el-tooltip无法显示。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值