vuetifyjs文本域实时保存,英文三秒保存一次,中文确认输入内容保存
compositionstart:文本合成系统如 input method editor(即输入法编辑器)开始新的输入合成时会触发 compositionstart 事件,例如,当用户使用拼音输入法开始输入汉字时,这个事件就会被触发。
compositionend:当文本段落的组成完成或取消时, compositionend 事件将被触发 (具有特殊字符的触发, 需要一系列键和其他输入, 如语音识别或移动中的字词建议)。
input:值发生变化时就会触发
英文输入时只触发input事件,中文输入时先触发compositionstart事件,然后input事件,输入完成后触发compositionend事件,可以根据这三个事件实现输入实时保存。
<template>
<div>
<v-row v-for="(v,i) in works" :key="i">
<v-col cols="12" sm="2" md="10">
<v-textarea
label="******"
auto-grow
rows="1"
class="mx-2"
@compositionend="saveWorksPinyinEnd()"
@compositionstart="saveWorksPinyinStart()"
@input="saveWorksInput()"
v-model="v.work"></v-textarea>
</v-col>
</v-row>
</div>
</template>
<script>
data() {
return {
works:[{work:''}],
isSaveWorkResult:false
}
},
created() {
},
watch: {
},
methods: {
saveWorksInput(){
if (!this.isSaveWorkResult) {
this.isSaveWorkResult = true;
setTimeout(() => {
this.handleSaveWorks();
this.isSaveWorkResult = false;
}, 3000);
}
},
saveWorksPinyinEnd(){
this.isSaveWorkResult = false;
this.handleSaveWorks();
},
saveWorksPinyinStart(){
this.isSaveWorkResult = true;
},
handleSaveWorks(){
let params = new URLSearchParams();
params.append('works', JSON.stringify(this.works));
this.axios.post(`url`, params).then((data) => {
if (data.retCode != 0) {
this.$notify.error(this, data.retMsg);
}
});
}
}
</script>