您现在的位置是： 首页 > 前端开发 Vue 监听回车 el-input 和 input 使用方法不同

Vue 监听回车 el-input 和 input 使用方法不同

2020-09-11 【前端开发】 2901人已围观 5158次浏览

简介Vue 监听回车 el-input 和 input 使用方法不同

在Vue项目中，经常会涉及到需要对某个输入框进行回车按键的监听，比如搜索框，输入完成后回车立即触发搜索事件

在普通 js 项目中，通常是这样使用的

document.onkeydown = function (e) { // 回车提交表单
    var theEvent = window.event || e;
    var code = theEvent.keyCode || theEvent.which;
    if (code === 13) {
        // 执行操作
    }
};

但在 Vue 项目中，就不用这么麻烦，只需要注意下 el-input 和 input 输入框使用的方法不同即可，比如

input

<input class="input" v-model="strSearch" @keydown.enter="btnSearch">

el-input

<el-input v-model="strSearch" @keydown.enter.native="btnSearch">

el-input 相比较 input ，在 @keydown.enter 后面要多一个 native ，否则 el-input 是无法监听回车按键的

很赞哦！ (0)

上一篇：SpringBoot 启动测试时出现提示 Test class should have exactly one public zero-argument constructor

下一篇：SpringBoot 2.x 文件上传出现 The field file exceeds its maximum permitted size of 1048576 bytes

相关文章

点击排行

站长推荐

标签云

猜你喜欢

站点信息

  • 网站地图