Element-UI组件使用 --踩坑篇

这篇具有很好参考价值的文章主要介绍了Element-UI组件使用 --踩坑篇。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.Vue Element ui el-input 键盘Enter事件 导致刷新表单问题

问题描述Element ui 中的el-input,当input仅有一项时,使用@keyup.enter.native事件绑定回车事 件,点击回车之后浏览器会刷新页面

el-input el-dropdown,vue.js,elementui

问题原因:由于当表单只有一个文本框时,按下回车将会触发表单的提交事件,导致页面的刷新

解决方法1:在el-form加上@submit.native.prevent,禁止表单默认submit事件。

解决方法2:既然el-form只有一个条件是enter会触发submit事件,那就增加一个隐藏条件,比如增加一个隐藏的el-input

el-input el-dropdown,vue.js,elementui

2. el-upload上传图片,action的默认路径为空,自定义接口上传图片,导致调接口出现404的情况

问题描述el-upload action路径为空或#,未使用http-request (覆盖默认的上传行为,可自定义上传),直接使用before-upload 自定义调用接口,同时调两个接口,一个是action的默认行为,另一个是自定义接口,action调用404,自定义接口调用成功,最终需要去除404的接口调用

el-input el-dropdown,vue.js,elementui

问题原因action设置属性为#或者空时,触发上传动作时,会触发action的默认上传的事件,走一遍该标签的本地接口,从而导致接口404

解决方法1:在before-upload事件中添加 return false 来阻止默认事件。

el-input el-dropdown,vue.js,elementui

解决方法2:使用http-request 覆盖默认的上传行为 (未实践此方法,有兴趣大家可以试一下)

3. el-dropdown组件使用时,子选项无法绑定事件的处理

问题描述:正常的element-ui 组件中,点击事件可以通过@click来绑定,但是下拉菜单的组件在子组件上绑定@click事件时无法绑定成功。

场景分析:设置账号的下拉菜单

el-input el-dropdown,vue.js,elementui

原因分析el-dropdown不是原生DOM节点,而此时绑定的click也非原生DOM事件,加上.native可以把自定义事件转变为原生DOM事件,即给父元素的子节点们都加上这个click事件

解决方法1:下拉菜单子组件el-dropdown-item点击事件后加.native

el-input el-dropdown,vue.js,elementui

解决方法2el-dropdown组件提供了点击某个下拉子菜单做不同的操作的方法 command事件

el-input el-dropdown,vue.js,elementui
el-input el-dropdown,vue.js,elementui
知识拓展.native修饰符的使用
.native–监听组件根元素的原生事件,主要是给自定义的组件添加原生事件

父组件增加原生点击事件

el-input el-dropdown,vue.js,elementui
子组件的点击事件(子组件无论点哪里都会触发alert弹窗)

el-input el-dropdown,vue.js,elementui

4. 在一个方法里面同时调用两次this.$notify方法,会出现通知框重叠的问题(如下)

el-input el-dropdown,vue.js,elementui
代码体现

el-input el-dropdown,vue.js,elementui
原因分析:结合源码分析,计算通知的间距时,会取当前元素的高度item.$el.offsetHeight,但是因为vue的异步更新队列有缓冲机制,第一次方法调用时,并没有更新dom,导致取到的高度为0,所以第二个通知只是上移了默认的offset 16px,并没有加上第一个通知的高度。

el-input el-dropdown,vue.js,elementui

解决方法1:使用调this.$nextTick 的方法,具有局限性 适合已知要渲染的信息条数或者数据少

el-input el-dropdown,vue.js,elementui
el-input el-dropdown,vue.js,elementui

解决方法2:使用Promise

el-input el-dropdown,vue.js,elementui
el-input el-dropdown,vue.js,elementui文章来源地址https://www.toymoban.com/news/detail-762995.html

到了这里,关于Element-UI组件使用 --踩坑篇的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包