需求

输入框 ，输入内容后 ，按enter+空格键 换行，按enter键 发送调取接口

思路

jquery的也分为三个过程，在事件名称上有所不同

1、某个键盘的键被松开：keyup
2、某个键被按下：keydown
3、某个键盘的键被按下或按住：keypress

1. 首先， 给el-input框绑定两个事件（鼠标按下） keydown和鼠标抬起keyup，
2. 用这两个事件来监听键盘按键情况。
3. 定义两个全局变量 isSpace和isEnter，默认为0，用来判断 按键状态
4. 获取keyCode代码后，把根据keyCode的值，判断是按了哪个键，赋值给一个对应的 isSpace和isEnter变量，然后再使用，该事件结束后再置为0；
5. 在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 警告，并且该事件会失效。