問題1: windows 電腦用微軟中文輸入法輸入一個字符會顯示多個
問題2: mac或者其他中文輸入法輸入都會有閃爍的抖動感
問題3:由於需求所定,這是一個自定義的輸入框,並且要實時更新,所以用不了v-model 與@blur
(用mac電腦沒重現輸入一個字符變多個,截圖了測試提的bug,bug被關了只剩個模糊的圖片~~~)
問題分析
使用 :value, @input - 輸入法異常;
使用 v-model 指令 - 輸入法正常;
使用@blur- 輸入法正常。
- v-model源碼分析
v-model使用的也是input事件
v-model 判斷了 composing 屬性,當輸入法組合沒有結束的時候,直接返回,並沒有賦值
2.@blur是失焦后才賦值,此時輸入法已結束;@input 沒有檢測輸入法結束就直接賦值。
問題思考
是否可以參考v-model的方法,監測輸入法結束時再給value賦值
參考v-model 使用的Composition
根據官方規范,Composition 事件觸發順序如下:
- 輸入開始時觸發 compositionstart
- 選擇字/詞完成輸入時觸發 compositionend
那么通過 Composition 事件,在 compositionend 賦值而非直接賦值既可