小小输入框里的诸多问题之一，enter事件

输入框算是最常见的表单组件之一了
最近接到一个需求，需要用enter键触发输入框的提交事件，那么话不多说，开整

<el-input v-model="value" @keyup.enter.native=handleEnter>

...
handleEnter() {
	console.log(this.value)
}
...

写到这里ok拉
赶快输入一段内容试试吧
输入内容：“chatGPT是什么”

在输入的过程中遇到一个问题
我的输入法是中文状态，输入chatGPT的之后，使用enter键输入这段英文，可是输入enter键之后，直接就执行了handleEnter…

这可咋整…

后来我查到 compositionstart 和 compositionend
这俩可以用于监听文字组合事件，简单理解就是中文输入法，在输入拼音的过程中会触发 compositionstart ，结束之后会触发 compositionend

vue源码中的v-model也做了此处理，否则在输入拼音的过程中，会疯狂出发input事件，然而并没有做enter键的兼容…

那么自己动手吧

<el-input 
  v-model="value"
 @keyup.enter=handleEnter
 @compositionstart=handleCompositionstart
 @compositionend=handleCompositionend
 >

data() {
  return {
    composing: false,
  }
}
...
handleEnter() {
	if (this.composing) {
	  console.log('在组合文字的过程中首次使用enter键，视为无效')
	  this.composing = false
      return
    }
	console.log(this.value)
}
handleCompositionstart() {
  console.log(this.composing)
  this.composing = true
}
handleCompositionend() {
  console.log(this.composing)
  setTimeout(() => this.composing = false, 100)
}
...

至此，解决了文字组合过程中使用首次enter键不应该触发enter事件的问题

真的解决了吗…

如果一个项目中有多处使用到了enter事件的地方 难道都要这么处理一下吗…

非也 非也

是时候祭出指令了

app.directive('enter', {
    created: function (el, binding) {
	  if (typeof binding.value !== 'function') {
	    throw new Error('请使用函数作为该指令的值')
	  }
	  let composing = false
	
	  function keyup(e) {
	    if (composing) {
	      composing = false
	      return
	    }
	    if (e.which === 13) {
	      binding.value()
	    }
	  }
	
	  function compositionstart() {
	    composing = true
	  }
	
	  function compositionend() {
	    setTimeout(() => {
	      composing = false
	    }, 100)
	  }
	
	  el.addEventListener('keyup', keyup)
	  el.addEventListener('compositionstart', compositionstart)
	  el.addEventListener('compositionend', compositionend)
	},
    unmounted: function (el) {
	  el.removeEventListener('keyup')
	  el.removeEventListener('compositionstart')
	  el.removeEventListener('compositionend')
	},
  })

<el-input v-model="value" v-enter="handleEnter"></el-input>

handleEnter() {
  console.log('在这里执行enter事件')
}

好了，这个时候，好像基本完事了。

然而事情并没有想象中的那么简单…

一个看似有用的指令开发完成了，但是接下来更加有难度的事情来了…

1. 如何让团队所有人都是用该组件？（如何让团队人员知晓该组件，发邮件，还是发起会议？是否有必要？是否应该用？这个指令是否真的可靠？是否会有副作用？）
2. 历史的问题如何改造？（是否需要改造？改造的工作由谁来做？在什么版本上线？出现问题后是谁的责任？）

小小的问题涉及大大的问题…

公司管理风格，团队协作氛围等等

一点拙见。