vue中el-input绑定键盘按键(按键修饰符)

2026-09-30 18:24:44

vue怎么写键盘事件

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>

到此这篇关于vue中el-input绑定键盘按键(按键修饰符)的文章就介绍到这了,更多相关el-input绑定键盘按键内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue.js项目 el-input 组件监听回车键实现搜索功能示例

基于element-ui 组件开发的vue.js项目, 实现回车键发起搜索,和原生的input 标签使用方法不一样: el-input 监听键盘按下状态得用@keyup.enter.native,如果是非el-input 组件,可以直接用@keyup.enter <el-input placeholder="搜索" icon="search" v-model="input" :on-icon-click="pchandleIc
vue使用element-ui的el-input监听不了回车事件的解决方法

原因今天在使用element-ui时,el-input组件监听不了回车事件,如下代码没有想要的效果: <el-input class="search-input" placeholder="请输入内容" v-model="searchText" @keyup.enter="search()"></el-input> 原因应该是element-ui自身封装了一层input标签之后影响了事件的监听,在el
vue中使用input[type="file"]实现文件上传功能

注意:input[type="file"] 标签中的属性accept="application/msword,application/pdf" 在pc上正常,但是在手机ios和android上这个文件格式限制会被忽略,所以需要在js中增加格式的判断,以及对应显示样式的设置.(我也是刚发现,如果有遇到这个问题的可以参考下---下面有更改:) ``` <template> <div id="my-careers"> <h
Vue中通过属性绑定为元素绑定style行内样式的实例代码

1.直接在元素上通过:style的形式,书写样式对象 <h1 :style="{color:'red','font-weight':200}">这是一个H1</h1> 2.将样式对象定义在data中,并直接引用到:style中 1:在data上定义样式 data:{ styleObj1:{color:'blue','font-weight':200,'font-size':'40px'}, } 2:在元素中,通过属性绑定的形式,将样式对象应用到元素中 <h
vue中view-model双向绑定基础原理解析

利用Object.defineProperty进行数据劫持代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue
简单理解vue中el、template、replace元素

本文实例为大家解析了vue中el.template.replace的元素,供大家参考,具体内容如下 api: http://cn.vuejs.org/api/#el el 类型: String | HTMLElement | Function 限制: 在组件定义中只能是函数. 详细: 为实例提供挂载元素.值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数.注意元素只用作挂载点.如果提供了模板则元素被替换,除非 replace 为 false.元素可以用 vm.$el
Vue中封装input组件的实例详解

Vue中封装input组件最近有点忙不过来脱了很久,没有更新抱歉.今天要将的时如何自定义封装input组件 ,博主知识发个简单的模板码友们可以更具自己的实际项目添加需要的参数我的项目中的UI图是这样的代码如下子组件的模板设置 <template> <div class="completion-input-box"> <span class="input-box-name">{{text}}</span>
浅谈vue中数据双向绑定的实现原理

vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Object.defineProperty() * 对对象的属性进行定义/修改 * */ let obj = {x:10} // 这两种方式都相对来说比较简单,直接,但是有些时候我们需要对对象的属性的修改和增加进行必要的干预 // obj.y = 20; // obj.x = 100; // obj.x =
vue中的select绑定多个值

目录 vue select绑定多个值 vue el-select 绑定id值 vue select绑定多个值不再通过v-model和value进行绑定而是通过绑定索引值Index 然后通过定义@input=change方法,通过索引值获取并更新想要绑定的多个值 <el-select v-model="basic_info.itemindex" placeholder="" @input="change"> <el-
vue中的input框点击后不聚焦问题

目录 input框点击后不聚焦问题 vue input聚焦的坑点击按钮,使某个input框聚焦加载页面时自动聚焦 [坑] input框点击后不聚焦问题废话不多说直接上代码哪个地方要写input框就直接把这一部分代码放上里面双向绑定的值和事件换上自己定义的 <div class="item" @click.stop.prevent="inputPaentClick('input1')"> <input
vue中el-input绑定键盘按键(按键修饰符)

vue怎么写键盘事件 vue允许将按键值作为修饰符来使用,如监听回车事件,有两种写法,如下代码: <input type="text" @keyup.13="console.log($event)"></input> <input type="text" @keyup.enter="console.log($event)"></input> 但要注意的是:当我们在在el-inpu
Vue中jsx不完全应用指南小结

前言:文章不介绍任务背景知识,没有原理说明,偏向于实践的总结和经验分享. 文章所有的代码是基于Vue CLI 3.x版本,不会涉及到一步步通过Webpack来配置JSX所需要的知识点. 在使用Vue开发项目时绝大多数情况下都是使用模板来写HTML,但是有些时候页面复杂又存在各种条件判断来显示/隐藏和拼凑页面内容,或者页面中很多部分存在部分DOM结构一样的时候就略显捉襟见肘,会写大量重复的代码,会出现单个.vue文件过长的情况,这个时候我们就需要更多的代码控制,这时候可以使用渲染函数. 渲染函数想

vue中el-input绑定键盘按键(按键修饰符)

相关推荐

随机推荐