Vue element el-input输入框 实现 ’空格+enter’组合键:换行,enter:发送,使用keydown和keyup键盘事件来实现
Vue element el-input输入框 实现 ’空格+enter’组合键:换行,enter:发送,使用keydown和keyup键盘事件来实现
需求
输入框 ,输入内容后 ,按enter+空格键
换行,按enter
键 发送调取接口
思路
jquery的也分为三个过程,在事件名称上有所不同
1、某个键盘的键被松开:keyup
2、某个键被按下:keydown
3、某个键盘的键被按下或按住:keypress
- 首先, 给
el-input
框绑定两个事件(鼠标按下)keydown
和鼠标抬起keyup
, - 用这两个事件来监听键盘按键情况。
- 定义两个全局变量
isSpace和isEnter
,默认为0
,用来判断按键状态
- 获取
keyCode
代码后,把根据keyCode
的值,判断是按了哪个键,赋值给一个对应的isSpace和isEnter
变量,然后再使用,该事件结束后再置为0; - 在
enter键中 else
里面,使用event.preventDefault()
,阻止input框默认的换行事件
(这一步可根据自己的项目需求进行修改,因为我在项目里使用了el-input 自适应文本高度属性
,
默认按enter
会有换行效果,所以这里使用event.preventDefault()
;阻止默认事件)
完整代码
<el-input clearable autosize
type="textarea"
:placeholder="$t('navbar.pleaseInput')"
v-model="inputText"
@keydown.native="inputChange"
@keyup.native="inputClick" />
data() {
return {
isSpace: 0,
isEnter: 0
};
},
methods(){
inputClick(event) {
// 获取按下的键的键值
const keyCode = event.keyCode || event.which;
if (keyCode == 13) {
this.isEnter = 0
}
if (keyCode == 32) {
this.isSpace = 0
}
},
inputChange(event) {
// 获取按下的键的键值
const keyCode = event.keyCode || event.which;
if (keyCode == 13) {
this.isEnter = 1
}
if (keyCode == 32) {
this.isSpace = 1
}
if (this.isSpace == 1 && this.isEnter == 1) {
console.log('空格+Enter 键被按下!')
} else if (this.isEnter == 1) {
console.log(this.isSpace, this.isEnter, '走enter')
this.inputAdd() //调用发送方法
event.preventDefault();//因为使用了 el-input 自适应文本高度,
//默认按enter会有换行效果,所以这里使用 event.preventDefault();阻止默认事件,可根据自己的项目需求进行修改
}
},
}
额外补充小知识
el-input无法绑定键盘事件?浅析.native修饰符的作用与原理
native介绍
我们在使用vue进行开发时,会有很多不同的组件,它们作为一个个标签填充在template模板中,你是否想过,这些组件既然是标签,那么它们能否监听html标签的各种事件呢?
结果是不能,原因在于这些组件虽然看上去和html标签一样,用法也和html标签一样,但实际上,它们只是子组件中真实html标签的一个载体而已,并不存在于真实dom中,既然不存在于真实dom中,那么当然也不能监听html标签的原生事件啦。
针对这种情况,Vue给我们提供了一个事件修饰符:.native
,它允许我们在自定义的组件标签中添加原生的DOM事件。
<template>
<div>
<!-- 组件直接绑定click事件,Vue会把click视为一个自定义事件 无法通过点击触发 -->
<MyComponent @click="handleClick()"></MyComponent>
<!-- 添加.native事件之后,Vue就可以识别出来这是一个原生的DOM事件:click事件 -->
<MyComponent @click.native="handleClick()"></MyComponent>
</div>
</template>
el-input
为什么无法绑定键盘事件?
因为:el-input
标签其本质上是一个组件。
我们给 el-input
添加@keydown事件时,keydown只能被解析为自定义事件,我们需要通过$emit手动触发该事件的回调函数才行。
而.native修饰符,就是为了这种情况而出现的,当我们使用了此修饰符后,vue会帮我们给组件的根标签添加一个事件监听器,我们便可以正常使用该事件了。
所以解决方法就是
:在el-input
绑定@keydown事件时,添加.native修饰符即可。
同理,其他的element组件也是可以用这个方法来绑定原生DOM事件的。也许你还有疑问:那为什么的@click事件就不用.native 修饰符呢?
答案也很简单,因为人家在创建组件时就为里面的标签绑定了一个click事件,相当于是官方提前为我们准备好了一个click接口,我们看似是在调用原生js的click事件,实际上是在调用element官方为我们提前准备好的方法。
总结
el-input
本质是一个组件,所有组件都无法直接绑定原生DOM事件,elementUI可以直接写click等原生事件其实是因为ele官方为我们提前预置了一些相关事件。(没有预置的我们就无法直接绑定相关事件了,正如 没有预置keydown事件)
想要为组件标签绑定原生DOM事件
,需要用到 .native
修饰符,其原理是Vue内部为组件的根标签中绑定了一个事件侦听器。
.native
是Vue官方专门为组件标签
准备的语法,所以 .native
不能用在 非组件标签 上,否则会引发 warn 警告,并且该事件会失效。
更多推荐
所有评论(0)