Vue el-input 使用@keyup绑定Enter键、上下左右键、删除键

最新推荐文章于 2024-06-30 22:08:25 发布

Song_Estelle

最新推荐文章于 2024-06-30 22:08:25 发布

阅读量3.2k

点赞数 1

分类专栏： vue 前端小知识文章标签：前端 vue.js elementui

本文链接：https://blog.csdn.net/weixin_43484014/article/details/124190799

版权

前端同时被 3 个专栏收录

40 篇文章 1 订阅

订阅专栏

小知识

32 篇文章 1 订阅

订阅专栏

vue

31 篇文章 3 订阅

订阅专栏

这篇博客介绍了如何在 Vue.js 中使用 `el-input` 组件监听并响应键盘事件，包括 Enter 键、上/下/左/右方向键以及删除键。通过绑定 `@keyup` 事件并指定 `.native` 修饰符，可以实现对这些按键的自定义操作，例如在控制台打印按键类型。

摘要由CSDN通过智能技术生成

Vue el-input 使用@keyup绑定Enter键、上下左右键、删除键

<el-input
    v-model="order"
    @keyup.enter.native="keyUpOperate('enter')"
    @keyup.up.native="keyUpOperate('up')"
    @keyup.down.native="keyUpOperate('down')"
    @keyup.left.native="keyUpOperate('left')"
    @keyup.right.native="keyUpOperate('right')"
    @keyup.delete.native="keyUpOperate('delete')"
/>

keyUpOperate(type) {
  console.log(type)
},

控制台随着按键点击输入：
在这里插入图片描述

Song_Estelle

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue el-input 使用@keyup绑定Enter键、上下左右键、删除键

Vue el-input 使用@keyup绑定Enter键、上下左右键、删除键<el-input v-model="order" @keyup.enter.native="keyUpOperate('enter')" @keyup.up.native="keyUpOperate('up')" @keyup.down.native="keyUpOperate('down')" @keyup.left.native="keyUpOperate('left')"
复制链接

扫一扫

专栏目录