vue中@input事件输入英文验证，切换中文文输入法验证错乱的解决方法：compositionstart和compositionend事件

最近做需求，遇到一个vue中输入4位英文判断图形验证的问题。就这个问题测试提了六七个bug，实属把握整不会了。下面就最主要的一个问题写一下解决方法：

需求详情：oninput事件输出长度为4位时，判断图形验证码是否正确，并toast.

bug复现：最开始只写了单独的input事件，但是当切换为中文输入法时，每次打字都会判断一次，造成toast多次出现。

解决思路：compositionstart  和 compositionend 判断输入法，当为中文输入法，输入完成之后在判断，当为英文输入法，长度为4就判断。

代码详情：

 

<input type="text" maxlength="4" id="imgcode"
                        v-model="imgCode" 
                        class="code_input" 
                        placeholder="请输入图形验证码"
                        @compositionstart="onCompositionStart"
                        @compositionend="onCompositionEnd"
                        @input="checkImgCode()"></input>

vue:

var lock =false;

checkImgCode: function() {

            const vm =this;

            if(!vm.lock){

                if(!vm.imgCode) {

                    vm.message.initOption('请填写正确图案');

                    return;

                }         

            }

        },

onCompositionStart() {

            const vm =this;

            vm.lock = true;

    },

 onCompositionEnd() {  

            const vm =this;

            // 输入中文触发      

            vm.lock = false;

        },

注意：lock 的初始值 以及onCompositionStart（）里lock为 true