我们经常会给 input 绑定事件监听内容的变化，然后做出一些处理。但是如果你注意，你就会发现在中文下，你还没有确定内容(比如 enter)，但是绑定的方法已经触发了。
你的绑定是这样的，
1
<input type="text" @input="onSearch" v-model="msg">
结果就是在中文输入法下，你还没选择文字，onSearch就触发了。
有两个事件 「compositionstart」、「compositionend」，我们要调整 input输入框的事件监听。
event !!!
compositionstart (合成开始)
compositionend （合成结束）
1
2
3
4
5
6
7
8
9
10
11
12
//通过这种js的方式获取元素并绑定事件
const bindFun = () => {
const inp = document.querySelector("input");
inp.addEventListener("input", () => {
onSearch();
});
};
onMounted(() => {
bindFun();
});
现在实现一下 bindFun方法，
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const bindFun = () => {
const inp = document.querySelector("input");
let isCompsing = false; // 是否合成
inp.addEventListener("input", () => {
if (isCompsing) return; //合成时，不触发搜索
onSearch();
});
// 合成开始和结束
inp.addEventListener("compositionstart", () => {
isCompsing = true;
});
inp.addEventListener("compositionend", () => {
isCompsing = false;
onSearch();
});
};
提问
这是一个输入框的情况下，如果页面存在多个输入框，处理多个还是会造成混乱的，在 vue 中大家是不是会封装成组件？ 在 reat 中是会封装成 「一般组件」还是 「HOC」 ?
