输入框算是最常见的表单组件之一了
最近接到一个需求,需要用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事件')
}
好了,这个时候,好像基本完事了。
然而事情并没有想象中的那么简单…
一个看似有用的指令开发完成了,但是接下来更加有难度的事情来了…
- 如何让团队所有人都是用该组件?(如何让团队人员知晓该组件,发邮件,还是发起会议?是否有必要?是否应该用?这个指令是否真的可靠?是否会有副作用?)
- 历史的问题如何改造?(是否需要改造?改造的工作由谁来做?在什么版本上线?出现问题后是谁的责任?)
小小的问题涉及大大的问题…
公司管理风格,团队协作氛围等等
一点拙见。