解决vue中keyup事件和blur重复调用，触发不同方法

本文参考：
使用Jquery时的处理（回车确定，失焦取消）：https://www.cnblogs.com/baiyangyuanzi/p/6568237.html
在vue中如何移除绑定事件：https://blog.csdn.net/yuanmengdage/article/details/85217466

在写项目的时候需要实现回车和失焦触发不同的事件。以达到回车确定，失焦取消的功能。在网络上我们大范围能找到的方法是
@keyup.enter="$event.target.blur"
但是这个方法与change事件几乎一致，在值不改变时仍想触发，给用户提示信息的时候可以使用。（不知道为啥，我这么写就报错，如果要用也可以写@keyup.enter="(event)=>event.target.blur()"）

本文就是将网上现有的Jquery的方法结合Vue的方式重现一遍。在keyup触发的事件中解绑失焦函数，在获得焦点focus事件中绑定失焦函数。

<template>
  <el-input
    v-model="inputVal"
    placeholder="请输入内容"
    @focus="focusFun"
    @blur="triggerBlur&&blurFun()"
    @keyup.native.enter="keyupFun"
  />
</template>

<script>
export default {
  data() {
    return {
      inputVal: '',
      oldInputValue: '',
      triggerBlur: false
    }
  },
  methods: {
    focusFun() {
      console.log('聚焦')
      this.triggerBlur = true
    },

    blurFun() {
      console.log('失焦')
      this.inputVal = this.oldInputVal
    },

    keyupFun() {
      console.log('回车')
      this.triggerBlur = false
      this.oldInputVal = this.inputVal
    }
  }
}
</script>

使用@focus绑定失焦事件
在@keyup事件中解绑失焦事件