web前端技术博客
您当前的位置:web前端 > vue.js

vue input使用v-model时,输入中文首字母时不触发更新

作者:只会切图的前端 发布时间:2021-04-05 16:39:59 浏览量:16

在vue中使用v-model双向绑定时,输入中文首字母不触发data更新
通过绑定事件实现:
el.addEventListener('compositionstart', onCompositionStart)
el.addEventListener('compositionend', onCompositionEnd)
修改composing的值,输入中文完成时手动触发input事件。
源码如下:

function onCompositionStart(e) {
    e.target.composing = true
}
function onCompositionEnd(e) {
    // prevent triggering an input event for no reason
    if (!e.target.composing) return
    e.target.composing = false
    trigger(e.target, 'input')
}
function trigger(el, type) {
    const e = document.createEvent('HTMLEvents')
    e.initEvent(type, true, true)
    el.dispatchEvent(e)
}

上一篇:vue中修改数组的方法 下一篇:返回列表
发表评论
验证码:
联系我
粤ICP备17092958号