vue3 指令输入框失去焦点后过滤前后的空格

最新推荐文章于 2024-05-23 13:41:20 发布

F_satr

最新推荐文章于 2024-05-23 13:41:20 发布

阅读量876

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/F_satr/article/details/128828154

版权

const getInput = (el: any) => {
    let inputEle
    if (el.tagName !== 'INPUT') {
        inputEle = el.querySelector('input')
    } else {
        inputEle = el
    }
    return inputEle
}
const dispatchEvent = (el: any, type: any) => {
    const evt = document.createEvent('HTMLEvents')
    evt.initEvent(type, true, true)
    el.dispatchEvent(evt)
}


export const directive = (app: any) => {
    // 过滤前后空格的指令 v-trim
    app.directive('trim', {
        mounted(el: any) {
            const inputEle = getInput(el)
            const handler = (event: any) => {
                const newVal = event.target.value.trim()
                if (event.target.value !== newVal) {
                    event.target.value = newVal
                    dispatchEvent(inputEle, 'input')
                }
            }
            el.inputEle = inputEle
            el._blu