[JavaScript知识库]解决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.oldInputVal = this.inputVal
		}
	},
}
</script>

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