解决vuetify等ui文本框输入中文选词时就触发了change事件

327 阅读1分钟

解决vuetify 文本框输入中文选词时就触发了change事件

  • compositionstart   当用户使用拼音输入法开始输入汉字时,这个事件就会被触发。
  • compositionupdate input 事件在输入过程中、内容变化后就触发
  • compositionend  输入完成时会触发 使用到 compositionstart compositionend 函数,这几个是原生的事件 因vuetify 文本框时组件时没有这几个事件的,所以通过指令的方式增加这两个事件。如果用的其他UI的也可以使用。
export default {
    bind(el, binding, vnode) {
        const { value } = binding;
        el.addEventListener('compositionstart', value);
        el.addEventListener('compositionend', value);
    },
    unbind(el, binding, vnode) {
        const { value } = binding;
        el.removeEventListener('compositionstart', value);
        el.removeEventListener('compositionend', value);
    },
}
<template>
    <v-text-field   
      v-model="searchText"
      v-composition="handleComposition"
    />
<template>
<script>
    export default {
        data(){
            chineseFlag: true
        },
        methond: {
            handleComposition(type){
                   if(val.type == "compositionstart"){
                        this.chineseFlag = false
                   } else {
                        this.chineseFlag = true
                   }
            },
            search() {
              if(!this.chineseFlag){
                return
              }
              // xxxx
            }
        }
    }
</script>