ElementUI 组件不支持@keyup 的解决办法

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

#java #js #react native #python #android

本文介绍在ElementUI项目中，如何正确使用@keyup.enter事件。针对该事件在组件中不起作用的问题，提供了解决方案，即通过添加.native修饰符将其转换为原生事件。

一、概述

在ElementUI 项目中，使用@keyup.enter事件，发现不生效。

<el-input  v-model="SearchData" class="input-with-select" @keyup.enter="SearchKeyDown">

二、解决方法

上面那种写法只适合原生,像组件是不适合用的, 加.native的原因就是为了转成原生

<el-input v-model="SearchData" class="input-with-select" @keyup.enter.native="SearchKeyDown">

本文参考链接：

https://blog.youkuaiyun.com/qq_39650528/article/details/81085669

shykevin
关注
基于elementui input完成的输入控件
longgege001的博客
11-12 3870
input输入框组件
ElementUI表单组件，传值，索引传值；组件传值；自动表单校验；多选框组件；选择器组件；；
m0_49194578的博客
05-23 3596
<el-table :key="tableKey" v-loading="listLoading" #决定列表是否处于加载状态的boolean值 :data="list" #数据绑定参数 border #是否有界限 fit highlight-current-row style="width: 100%;" # 宽度 @sort-change="sortChange" # 排序改变时触发的回调 > 在这个标签内的元素就可以使用ro.
vue element-ui 绑定@keyup事件无效的解决方法
12-29
解决办法： <el v-model=searchParmas.gameName placeholder=游戏名称 class=w120 keyup.native=getGameList(searchParmas.gameName)></el> 加上.native覆盖原有封装的keyup事件即可。 以上这篇vue element-ui 绑定@keyup事件无效的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
Vue+element使用@keyup.enter不起作用
Alive_tree的博客
08-14 3043
今天在写登录功能的时候，在用Vue的@key.enter的时候由于使用elementUI组件，@keyup.enter不起作用，经排查，发现需要这样@keyup.enter.native=“login” 代码 <el-form ref="loginForm" :model="loginForm" :rules="myRules" @keyup.enter.native="login"> <el-form-item prop="account">
elementUI组件不支持@keyup 的解决方法
qq_44100778的博客
01-27 570
使用elementUI的el-input组件后发现键盘事件无法触发解决如下 这样写无法触发事件 <el-input class="input" placeholder="请输入内容" v-model="input" @keyup.enter.native="search()"></el-input> 由于el-input被elementUI封装后将原事件隐藏了，需要在keyup.enter事件后加.native来监听原生事件 <el-input class="input"
vue element UI使用 @keyup.enter不生效
yjl13598765406的博客
11-24 3414
vue element UI使用 @keyup.enter不生效
成功 解决 @keyup.enter=“search()“ 在el-input 组件中不生效的问题
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
07-14 760
成功 解决 @keyup.enter="search()" 在el-input 组件中不生效的问题
Vue ElementUI组件中限制输入框仅能输入正整数
06-30
ElementUI的input组件不直接支持keyup事件，需借助.native修饰符监听原生DOM事件。代码如下： 在Vue的methods里定义handleKeyup函数： 方法二：利用正则表达式校验 在输入框失去焦点（blur）时，用正则表达式检查...
ElementUI Tag组件实现多标签生成的方法示例
10-16
在Vue.js框架中，ElementUI库提供了一个名为`Tag`的组件，用于创建标签功能，非常适合于文章分类、产品标签等场景。本文将详细介绍如何利用ElementUI的`Tag`组件实现多标签的生成方法。 首先，我们需要在Vue项目中...
基于Element UI 封装的Vue可编辑div输入 组件，可实现@人员和 发送剪切板 文件
weixin_45058982的博客
12-30 1815
文章目录设计背景使用效果代码实现template模板可编辑div及@部分script部分style部分浏览器兼容性 设计背景 最近客户提出要在输入框中实现类似微信@人 和发送截图功能，于是考虑到使用可编辑div来代替input输入框 使用效果 先上图，看效果 发送截图功能暂不展示，可参考实现 代码实现 template模板可编辑div及@部分 <div> <div id="atInputComponents"> <div ref="editD
elementui input type=textarea不支持clearable吗
最新发布
11-01
用户明确询问ElementUI中el-input组件当type="textarea"时是否支持clearable属性。 现在，用户提供了几个引用： - 引用[1]：讨论了el-input type="textarea"的功能，但没有具体提到clearable属性。 - 引用[2]：展示...
el-input添加keyup事件无响应
ioncannontic的博客
03-19 1099
.native修饰符
el-input添加keyup事件无响应_el-input @keyup无效，2024年最新2024前端常见面试题
04-17 801
【代码】el-input添加keyup事件无响应_el-input @keyup无效，2024年最新2024前端常见面试题。
vue element-ui input输入框绑定@keyup回车事件无效
honeymoon_的博客
06-22 1800
由于element-ui把input进行了封装，对于el-imput，使用 @keyup.enter是无效的，因此，要加上native限制符。 element ui: <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input2" @keyup.enter.native="search"> </el-input> 原生input不用： <input
解决el-input绑定@keyup事件无效问题
m0_44949211的博客
09-07 2197
解决el-input绑定@keyup事件无效问题 1.input框绑定@keyup事件 <input v-model="firstName" @keyup.enter="方法名"></input> 2.vue中el-input框绑定@keyup事件,需要加上**.native修饰符**,否则不生效 <el-input v-model="lastName" @keyup.enter.native="方法名"> </el-input> ...
element-ui 中的el-input 添加keyup、keydown、keypress等键盘事件的注意的点
yang5687810的博客
09-24 8174
element-ui 中的el-input 按照vue官方API添加键盘事件不生效，这是因为在el-input 的input外边封装了一层div。 只要在事件后边加上.native()就可以了 <el-input placeholder="请输入内容" @keyup.enter.native="on_filter"></el-input> ...
vue element-ui 绑定@keyup.enter事件无效解决办法
总结前端开发中遇到的问题，分享前端知识
09-01 5033
一般情况解决办法： 在按钮上绑定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-bu
elementui el-input正则表达式使用onkeyup事件，只可输入小数类似12.22等
qq_41040413的博客
10-29 1933
<input onkeyup="this.value=this.value.replace(/[^(\d||/.)]/g," ">
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值