compositionstar: 当用户使用拼音输入法开始输入汉字时,compositionstart事件就会被触发。
compositionend:当文本段落的组成完成或取消时, compositionend 事件将被触发。
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<input
@input="inputChange"
@compositionstart="compositionstart"
@compositiοnend="compositionend"
v-model="values"
/>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
flag: true,
values: "",
timer: null,
};
},
methods: {
inputChange() {
if (!this.flag) return;
if (this.timer) {
clearInterval(this.timer);
}
this.timer = setTimeout(() => {
console.log(666, this.values);
this.flag = true;
}, 500);
},
compositionstart() {
this.flag = false;
},
compositionend() {
this.flag = true;
},
},
};
</script>