如何给el-dropdown-item 绑定一个事件 或 多个事件,并禁用

最新推荐文章于 2023-06-07 11:01:41 发布
最新推荐文章于 2023-06-07 11:01:41 发布
阅读量1.6k 收藏 2
点赞数 4
分类专栏： element-ui el-dropdown-item @click.native=" " 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45300842/article/details/107990297
版权

如何给el-dropdown-item 绑定一个事件 或 多个事件,并禁用

@click.native=" 事件名 "

禁用 disabled

// An highlighted block
 <el-dropdown-item :disabled="true" command="a" @click.native="dialogFormVisible = true ; dialogForm()">财务审核</el-dropdown-item>


绑定多个事件 直接 ; fun（） 在后面写 事件即可
             <el-dropdown-item disabled >设置</el-dropdown-item>
顿顿不离蛋
关注
  • 4
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html5取消下拉菜单,解决elementui中el-dropdown下拉菜单禁用项没有鼠标悬浮禁用样式...
weixin_32829465的博客
06-03 2115
问题描述饿了么ui中的下拉菜单组件，如果某个下拉菜单被我们禁用了以后，颜色会置灰，点击也没反应了。但是存在的问题就是，当鼠标悬浮到对应的禁用项上面的时候，我们会神奇的发现，居然没出现鼠标禁用的样式，官方给出的竟然还是一个箭头的样式。问题图如下：图是从官网上截取的其实并不影响产品的使用，但是有的时候我们想要优化一下效果。使其达到鼠标移入出现禁用样式，如下图，就是我们想要的效果禁用的时候鼠标悬浮时应为...
vuex-dropdown:vuex-dropdown是一个简单的vuejs下拉组件
04-28
script type =" text/javascript " src =" node_modules/vue-dropdown/dist/vuex-dropdown.min.js " > </ script > 浏览器使用情况 然后使用Vue.use(VuexDropdown);安装该组件Vue.use(VuexDropdown); &lt...
小程序-dropdownmenu 下拉菜单
06-26
dropdownmenu一个写好的微信小程序帅选条件框，多条件筛选，下拉菜单，直接引用组件就可以 读懂并灵活运用必须具有html，css ，js基础，除此之外还必须阅读小程序官方文档对组件的封装与使用相关文档
vue+element搭建后台小总结 el-dropdown下拉功能
10-16
主要为大家详细介绍了vue+element搭建后台小总结，el-dropdown下拉功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
el-dropdown-item disabled后el-tooltip失效
困惑中，解惑时
08-09 1914
需求：当el-dropdown-item不能点击时，应该给予用户提示，告知用户为什么不能点这个选项。方案是用户hover该el-dropdown-item后，通过tooltip提示信息。 问题：当el-dropdown-item被disabled了，外层的tooltip也会被disabled。代码如下所示： <el-tooltip effect="dark" content="无新增日志权限，不可新增日志" placement="bottom-end" :disabled="isCouldAd
Vue+elementui实现动态禁用菜单栏
HeBLL的博客
08-18 2252
动态禁用
下拉菜单el-dropdown-item点击事件未生效问题
huangjinsheng1988的专栏
09-14 377
el-dropdown-item
elementUI,el-el-dropdown组件给disabled元素项设置hover样式
ZhiShiCaiFu的博客
11-18 1560
问题：我们直接给disabled项设置hover伪类样式，不生效？ 原因：是因为elementui给元素添加了：pointer-events: none; 解决方法：我们去除pointer-events: none;即可
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
10-15
主要介绍了解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vant 自定义 van-dropdown-item的用法
10-15
主要介绍了vant 自定义 van-dropdown-item的用法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
element-ui点击el-dropdown-item后，el-dropdown-menu二次触发显示的问题
qq_21597979的博客
06-07 1315
工作中遇到的问题，点击el-dropdown-item，打开新页面后，menu再次触发显示。 触发菜单显示到点击选项期间，鼠标会经过这之间的红色区域，它不属于dropdown，所以此时会先触发hide，再次触发show，show默认是250ms的延时，所以当这个过程鼠标过快时，会发生二次显示的情况。我的解决办法就是 继承原来的代码，重写点击选项的方法，再触发点击后清除定时器clearTimeout(this.timeout)，这样就可以了。
el-button或者el-dropdown禁用模式下悬停显示信息无法显示
WCR_520的博客
01-24 885
span包一层 <el-tooltip :disabled="isUpdateCodeShow" content="请在标准编辑中启动"> <span> <el-dropdown-item :disabled="!isUpdateCodeShow" @click.native="updateCode">一键更新编码</el-dropdown-item> <span> </el-tooltip> ...
037_Dropdown下拉菜单
aihiao的专栏
03-01 2608
1. Dropdown下拉菜单 1.1. Dropdown下拉菜单将动作或菜单折叠到下拉菜单中。 1.2. Dropdown Attributes 参数 说明 类型 可选值 默认值 type 菜单按钮类型, 同Button组件(只在split-button为true的情况下有效) string 无 无
el-dropdown（下拉菜单）
YG_zhh的博客
09-19 5089
el-dropdown(下拉菜单)
[element-ui] el-dropdown下拉菜单禁用项没有鼠标悬浮禁用样式
qq_14993591的博客
04-07 766
如果我们再点击肉夹馍，我们会发现，打印出来的e的内容中的disabled的值就位true，所以发现规律了，就可以做控制了。即为：只有当e.disabled的值为false的时候（说明未被禁用），那么我们才在对应的回调中做相关的事情，否则就忽略。当然，如果自定义了command参数，也可以尝试接一下e，比如。鼠标移入出现禁用样式，如下图，就是我们想要的效果。
ElementUI Dropdown 下拉菜单
shykevin的博客
02-20 4025
一、概述 在后台项目中，使用Dropdown 下拉菜单时，发现对el-dropdown-item绑定点击事件时，一直没有触发，比如： <el-dropdown-item @click="password()">修改密码</el-dropdown-item> 后来查阅官方文档，原来是使用方式不对。接下来，介绍一下正确使用方法。 二、指令事件 点击菜单项后会触发事...
ElementUI中Dropdown 下拉菜单el-dropdown-item 点击事件无效
Yjx的博客
08-10 5211
ElementUI
1分钟教你使用element下拉框之指令事件@command
weixin_44265146的博客
05-29 1791
【代码】1分钟教你使用element下拉框之指令事件@command。
el-dropdown-item绑定事件
最新发布
06-28
### 回答1： el-dropdown-item可以通过绑定事件来实现点击后触发相应的操作。具体的实现方式可以参考以下代码示例： <el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item @click="handleClick('选项一')">选项一</el-dropdown-item> <el-dropdown-item @click="handleClick('选项二')">选项二</el-dropdown-item> <el-dropdown-item @click="handleClick('选项三')">选项三</el-dropdown-item> </el-dropdown-menu> </el-dropdown> 在这个示例中，我们通过@click来绑定了handleClick方法，当用户点击el-dropdown-item时，会触发handleClick方法，并将对应的选项文本作为参数传递给该方法。开发者可以根据自己的需求来编写相应的事件处理逻辑。 ### 回答2： El-dropdown-item是Element UI中的一个下拉框组件，通常用于显示下拉菜单列表。当用户在下拉框中选择某个选项时，我们可能需要执行一些特定的操作，这时就需要绑定事件。 在Element UI中，我们可以通过通过在el-dropdown-item标签上添加@click事件来实现事件绑定，例如： ``` <template> <el-dropdown> <span class="el-dropdown-link"> 下拉框<i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item @click="handleClick('1')">选项1</el-dropdown-item> <el-dropdown-item @click="handleClick('2')">选项2</el-dropdown-item> <el-dropdown-item @click="handleClick('3')">选项3</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </template> <script> export default { methods: { handleClick(val) { console.log(`您选择了${val}`); } } } </script> ``` 在上面的示例中，我们定义了一个叫做handleClick的方法，并将它绑定在el-dropdown-item的@click事件上。当用户选择某个选项时，这个方法会被触发，并且可以获取用户选择的值。在这个例子中，我们将选择的值打印输出在控制台上。 需要注意的是，由于el-dropdown-item标签是在el-dropdown-menu标签中嵌套的，因此事件需要在el-dropdown-item上绑定，而不是在el-dropdown-menu标签上绑定。在有多个选项的情况下，每个选项都应该添加一个@click事件进行事件绑定，以便实现选择不同选项时执行不同的操作。 ### 回答3： 在Vue中，el-dropdown-item是一个下拉选项的组件，可以通过绑定事件来实现组件的功能。 首先，需要在el-dropdown-item上使用@click或@click.native绑定事件。这两个事件的区别在于，@click会把事件绑定在el-dropdown-item组件上，而@click.native会把事件绑定在原生的HTML元素上。 例如，我们可以在下拉选项中绑定一个点击事件，如下所示： <el-dropdown-item @click="handleClick">选项一</el-dropdown-item> 其中，handleClick是我们定义的处理点击事件的方法，需要在Vue的methods中定义。例如： methods: { handleClick() { console.log('选项一被点击了'); } } 在这个方法中，我们可以实现对选项一的点击处理。例如，可以发送请求、展示信息、控制页面等等操作。 除了点击事件之外，还可以绑定其他事件，例如鼠标悬停事件@mouseover、鼠标移开事件@mouseleave等等。使用方法与点击事件类似，只需要将事件名替换即可。 需要注意的是，在使用el-dropdown-item时，需要将其放在el-dropdown中，并将el-dropdown-menu作为其直接子组件。这样才能实现下拉菜单的效果。 综上所述，el-dropdown-item的事件绑定可以实现下拉菜单选项的功能。通过绑定不同的事件，可以实现多样化的操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值