vue element UI使用 @keyup.enter不生效

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

问题如下图所示,点击@keyup.enter不生效

1. 一般情况解决办法

在按钮上绑定keyup事件,加上.native覆盖原有封装的keyup事件

<el-button type="primary" class="sub-btn" style="width:100%;" :disabled="btnDisabled" :loading="logining" @click.native.prevent="handleSubmit" @keyup.native.enter="handleSubmit">{{loginStr}}</el-button>

2. 终极解决办法

使用的是element-ui按钮,因为有遇到过第一种情况绑定之后无效情况,记录下此方法。在created使用文章来源地址https://www.toymoban.com/news/detail-609252.html

created () {
    document.onkeyup = e => {
      if (e.keyCode === 13 && e.target.baseURI.match(/login/)) {
        // 调用登录 验证方法
        this.submitForm()
      }
    }
  }

到了这里,关于vue element UI使用 @keyup.enter不生效的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vue element ui From表单校验不生效问题解决

    解决方案① el-from 上要使用 :model 不要使用 v-model 解决方案② el-from-item 上是否有加 prop ,并确定 prop 是不是和编写的规则相同 解决方案③ $refs[formName] 与 $refs.formName 注意事项 前者提交的时候要传参 @click=\\\"submitForm(\\\'ruleForm\\\')\\\" 不然不生效 解决方案④网上有人说 未在 data 里面声

    2024年02月11日
    浏览(26)
  • #vue#使用Element输入框,使用enter回车键搜索或提交

    如果整个表单只有一个输入框,按enter键实现搜索 同时进行监听有没有输入值,在methods里,写上监听的方法,当获取的v-model里的值,按下了回车键,如果需要监听空格或者其他键,换成别的键值 vue+elementUI在输入框中按回车键如果依旧会刷新页面;问题原因:当一个 form 元素

    2024年02月16日
    浏览(26)
  • 使用 Element UI 和 Vue.js 搭建电商商城系统

    作者:禅与计算机程序设计艺术 电商商城系统作为传统互联网行业的标杆,在近几年已经成为各大公司必不可少的业务系统之一。但是,构建一个成熟的电商商城系统仍然具有诸多挑战。例如,功能模块繁多、用户交互复杂、界面呈现效果丰富、数据量大等。为了解决这些问

    2024年02月08日
    浏览(31)
  • Vue.js 中使用 Element UI 实现异步加载分页列表

    在前端开发中,我们常常需要展示大量数据,并提供分页浏览的功能。本篇博客将介绍如何使用 Vue.js 和 Element UI 组件库创建一个简单的异步加载分页列表。 Vue.js Element UI JavaScript 我们将创建一个包含表格和分页组件的 Vue 单文件组件。以下是组件的基本结构: 引入 Element U

    2024年02月04日
    浏览(40)
  • vue element ui el-popover 样式修改不生效解决方法

    在使用element 的el-popover 组件时,会发现自己对el-popover 写的样式不起作用,甚至连使用 ::v-deep ‘’ /deep/ 行内Style 这四种样式穿透都不起作用, 这是因为 el-popover生成的div不在当前组件之内,甚至不在App.vue组件的div内,他和App.vue组件的div平级。所以需要全局设置style 首先给

    2024年02月11日
    浏览(45)
  • 【前端】Element-ui el-select 绑定 v-model 不生效问题汇总

    1、 v-model 绑定的值与下拉选项的值类型不一致。 2、绑定的值未声明。 如上所示,需要具体声明。 3、value 前 需要加 冒号  : 

    2024年02月03日
    浏览(30)
  • vue中使用element ui的el-table在el-table-column下使用slot插槽v-if条件渲染没生效或者混乱

    vue 引入element ui中的el-table组件时,在el-table-column下使用作用域插槽,通过v-if条件来动态显示某些元素,发现有的条目渲染没生效或者混乱。如: 原因:vue虚拟dom机制,会尽量复用已存在相同节点元素而不会重新渲染,导致使用v-if没有达到预期效果 解决方法:使用div元素将

    2024年02月11日
    浏览(35)
  • Vue-给element-ui的input输入框绑定键盘事件不生效

    在vue中使用elementui的input组件绑定回车事件生效。 el-input @keyup.enter=\\\'方法\\\' /el-input 在vue中如果直接使用 v-on或@ 监听事件的话, 监听的是 由组件中使用$emit自定义的事件 , 例如下面代码。 使用 .native 修饰符, 告诉vue这是触发的 原生事件 不是 自定义事件 , 比如下面这个监听 ele

    2024年02月13日
    浏览(39)
  • vue前端直接使用element-ui的upload组件上传到阿里云OSS存储

    因为公司的服务器比较拉吧,所以老大决定将数据文件等上传到阿里云服务器,通过ali-oss方式,这样的话读取文件也比较快  (能看到这说明什么安装element-ui都会了,我就不详细介绍了,直接跳过)  在执行下面操作之前,你要确定你的阿里云能看到上边这个页面   这里主

    2024年02月10日
    浏览(43)
  • vue.js3 setup风格 element-ui 级联选择器clearCheckedNodes使用方法

    Cascader 级联选择器 | Element Plus 官方文档里提到可以清空选中节点,使用 clearCheckedNodes()方法:   具体用法: 1 先了解vue3 setup中怎么获取ref 获取方法非常简单,在需要获取的组件里写ref,在setup里定义同名空ref,就会自动获取了 定义ref: 在setup里定义同名空ref: 然后操作mu

    2024年02月12日
    浏览(27)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包