给element-ui的steps加@click.native事件

最新推荐文章于 2024-05-22 18:10:50 发布
最新推荐文章于 2024-05-22 18:10:50 发布
阅读量3.9k 收藏 5
点赞数 1
分类专栏： js 文章标签： element-ui vue @click.native js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39343308/article/details/84991833
版权

       今天有个需求需要给element-ui的steps添加点击跳转，看了看steps的API没有这个属性。就给它添加一个@click事件吧，添加之后发现不好使，找了一番资料发现得这样写就可以了@click.native

      这个native是什么作用呢？

      查了一番资料大概就是vue封装@click这些方法时阻止了原生的DOM事件，而native就是释放DOM原生事件。欢迎有别的意见的大牛评论

小白阿斯兰
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
elementUI的notify的click事件
Coco_998的博客
10-17 1583
Notification 通知,
element-ui@2.15.7.zip
11-28
压缩包 `element-ui@2.15.7.zip` 内可能包含以下内容： - `lib` 目录：包含了编译后的 CSS 和 JavaScript 文件，用于在项目中引入 Element UI 组件。 - `css` 子目录：CSS 样式文件，如 `element.css` 和 `element...
Element中按键修饰符有时候需要加.native
qq_61950936的博客
09-10 1155
说白了就是在Element组件库中给el-input加修饰符的时候，我们要再加一个.`enter`，把需要加的按键修饰符转为原生的按键修饰符。
el-radio等elementui组件使用@click.native时，绑定的事件会触发2次的问题
SilenceJude的博客
05-15 8253
场景描述 由于某些原因，elementui提供的事件并不能满足我们的需求。此时如果想监听根元素的原生事件，就只能使用.native修饰符。 本次项目中，我也遇到了同样的情况，因此使用.native修饰符来监听原生click事件。 然而，在点击的时候，却发现el-radio上绑定的事件触发了2次！！ 解决过程 自己找了半天，也没找到问题所在。但是大概猜想到了原因，el-radio肯定是封装了好...
【Element入门】3、Element UI 表单组件详解
最新发布
weixin_52938153的博客
05-22 1259
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。
ElementUI中绑定@click失效问题
qq_55856928的博客
05-07 466
由于Vue的@click是封装的，所以在elementui的组件里需要加上.native属性，这时如果用的循环渲染的radio组件，可能会看到这样的情况。只需把prevent去掉或换成.stop即可（stop阻止点击事件冒泡到父组件）@click.native.prevent条件下。会丢失elementui的原有效果。
＜ elementUI组件样式及功能补全： 实现点击steps组件跳转对应步骤 ＞
一个平平无奇的技术宅
02-23 5230
在 Vue + elementUi 开发中，elementUI中steps步骤条组件只提供了change方法，并未提供各个步骤的点击跳转方法。在实际项目使用中，如果步骤条并非一步一步进行，而是有步骤跳转。那么就需要自己去自定义DIY了。接下来，简单阐述下，开发中使用方法！
ElementUI之steps步骤条实现点击跳转
m0_72663698的博客
08-07 2905
解决方法：把 '.native' 换成 '.enter''.native' 修饰符在vue3中被弃用了。为 el-step 添加 @click.下面是vue3的语法。
element-ui@2.15.9 cdn资源
08-09
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.9/lib/index.css"> <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.9/lib/index.js"> ``` 这样，Element UI 的样式表和 ...
element-ui最新版，2.15.7
04-06
公司需要内网开发，因此休息的时候找了一下element离线版，可是网上基本都是各种限制下载的资源，所以决定自己尝试做了一份。在网上找了大神的教程，按部就班的做了一份，动手党可以一起尝试，链接在此：...
element-ui-2.15.6.zip
02-23
在给定的 "element-ui-2.15.6.zip" 文件中，我们可以找到构建和运行 Element UI 应用程序所需的所有资源。 1. **版本信息**：文件名 "element-ui-2.15.6" 表明这是 Element UI 的 2.15.6 版本。每个版本都可能包含...
element-ui@2.13.1.zip
05-17
这个是unpkg.com的全部内容，其实只需要lib目录即可，使用方法参看官方文档，或者：https://blog.csdn.net/shengshuai/article/details/106171725
vue element-ui框架 el-dropdown-menu 绑定click事件/.native在组件化开发中的用法
qq_43482288的博客
06-23 532
wolf131721 2018-05-26 10:30:41 25589 收藏 ...
给element-ui的steps加点击事件
小宝儿的学习之路
06-20 3691
添加@click 添加之后发现不好使 找了一番资料发现得这样写就可以了@click.native 这个native是什么作用呢？ 查了一番资料大概就是vue封装@click这些方法时阻止了原生的DOM事件，而native就是释放DOM原生事件。 这样就可以实现steps添加点击事件的效果了 ...
el-tabs和el-steps切换以及steps点击事件
hikktn的博客
04-08 6265
首先，还是百度了一下示例，但是这些人的效果都不太满意，并且还有bug，故而自己改造了一下代码。 <template> <div> <el-steps :active="active_index - 0" simple style="margin-top: 20px"> <el-step v-for="(item,index) of stepParams" :key="index" :
记录--@click和@click.native有什么区别，如何阻止第三方组件内部的冒泡
林恒的博客
09-06 3615
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 一.@click和@click.native的区别 vue @click.native 原生点击事件： 1，给vue组件绑定事件时候，必须加上native ，不然不会生效(监听根元素的原生事件，使用 .native 修饰符) 2，等同于在子组件中： 子组件内部处理click事件然后向外发送click事件：$emit("click...
elementui中内容滚动并伴随着el-steps状态自动切换，点击el-steps内容也会自动定位到相应位置
m0_50441807的博客
07-17 2779
是因为有可能是计算存在一些误差，需要微微调整（因为点击el-step的同时也会执行if判断，得确保执行的是对应的if判断，不然两边会冲突）el-scrollbar__wrap默认会添加height。//必须设置el-scrollbar的高度。//获取滚动内的每个盒子距离顶部的距离。//注册点击事件，获取索引。//获取有滚动条盒子的对象。注上面的if判断里面的。...
elementui组件使用@click.native时，绑定的事件会触发2次的问题
KLW75
07-15 3885
事件冒泡机制导致，使用.prevent阻止默认事件，可以解决这个问题。 参考文章https://blog.csdn.net/SilenceJude/article/details/90240420
前端element-ui组件库el-card卡片【hover效果与点击事件(点击无效用@click.native=““)解决】
在写作的路上持续输出。
09-22 8760
前端element-ui组件库el-card卡片【hover效果与点击事件(点击无效用@click.native="")解决】
vue3 element plus el-button @keyup.enter.native 点击回车无效
09-01
在Vue3中使用Element Plus组件库的el-button组件时，如果希望在键盘按下回车键时触发点击事件，可以使用@keyup.enter.native修饰符。然而，如果点击回车键后没有触发点击事件，可能有以下几个原因： 1. 事件绑定...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值