解决vuetify 文本框输入中文选词时就触发了change事件
# 解决vuetify 文本框输入中文选词时就触发了change事件
- compositionstart 当用户使用拼音输入法开始输入汉字时，这个事件就会被触发。
- compositionupdate input 事件在输入过程中、内容变化后就触发
- compositionend 输入完成时会触发
使用到 compositionstart compositionend 函数，这几个是原生的事件
因vuetify 文本框时组件时没有这几个事件的，所以通过指令的方式增加这两个事件。如果用的其他UI的也可以使用。
```javascript
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);
},
}
```
```javascript
<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>
```