关于前端:elinput绑定键盘按键按键修饰符

4次阅读

共计 1446 个字符，预计需要花费 4 分钟才能阅读完成。

vue 容许将按键值作为修饰符来应用，如监听回车事件，有两种写法，如下代码：

<input type="text" @keyup.13="console.log($event)"></input>

<input type="text" @keyup.enter="console.log($event)"></input>

但要留神的是 ：当咱们在在 el-input 采纳如上两种写法时，他是不失效的。el-input 监听不到键盘事件, 起因是 element-ui 是封装组件，所以 el 标签属于自定义标签，因而触发不了键盘事件。
解决办法：加上.native 原生事件修饰符即可。.native：监听组件根元素的原生事件，次要作用是给自定义的组件增加原生事件。
vue 与 elementUI 中给 el-input 绑定键盘按键代码如下：

<el-input placeholder="店铺名称" clearable v-model="queryObj.shopname" @keyup.enter.native="query">
   <template slot="prepend"> 店铺名称 </template>
</el-input>

别名修饰符	键值修饰符	对应按键
.delete	.8/.46	回格 / 删除
.tab	.9	制表
.enter	.13	回车
.esc	.27	退出
.space	.32	空格
.left	.37	左
.up	.38	上
.right	.39	右
.down	.40	下

别名修饰符	可用版本	对应按键
.left	2.2.0 以上	左键
.right	2.2.0 以上	右键
.middle	2.2.0 以上	中键

别名修饰符	可用版本	对应按键
.ctrl	2.1.0 以上	Ctrl 键
.alt	2.1.0 以上	Alt 键
.shift	2.1.0 以上	Shift 键
.meta	2.1.0 以上	meta 键（Windows 零碎上为田键）

对于组合修饰符的应用：
vue 为咱们提供了组合修饰符的机制，然而它的应用，必须配合零碎按键修饰符才能够失效。如下是一段测试代码：

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<div id="app">
  <button @click.ctrl="ctrlClick" @click="together"> 带上 ctrl 来找我玩呀 </button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script type="text/javascript">
  let vm = new Vue({
    el: '#app',
    methods: {together(event) {if (!event.ctrlKey) {console.log('------------- 我是可恶的分割线呀 -------------')
          console.log('$event.ctrlKey:', event.ctrlKey)
        } else {console.log('欢送呀！')
        }
      },
      ctrlClick(event) {console.log('------------- 我是可恶的分割线呀 -------------')
        console.log('$event.ctrlKey:', event.ctrlKey)
        console.log('Ctrl 你来了呀！')
      }
    }
  })
</script>
</body>
</html>

正文完