自定义整数指令

import type { App } from 'vue'
import { isExist } from '../utils';
/**
 * 
 * @param app
 * v-int
 */
export function int(app: App) {
    // 是否第一次更新时，自动补全小数点
    let isFirstCompleteDeci = false;
    app.directive('int', {
        // 在绑定元素的父组件
        // 及他自己的所有子节点都更新后调用
        mounted(el, binding, vnode, prevVnode) {
            const input = el.querySelector('input');
            bindEvents(input, input.value);
        }
    })

    const deciHandler = (input: HTMLElement | EventTarget) => {
        let value = input.value;
        const reg = new RegExp("(?:[^-.0-9]+)?\\-*(0)*([1-9]\\d*)?(?:[^-.0-9]+)?", "g");
        const matches = reg.exec(value);
        value = matches[2] || '';
        if (isExist(matches[1], true) && !value) {
            value = matches[1].replace(/0+/, '0');
        }
        return value
    }

    const bindEvents = (input: HTMLElement, oldValue: string) => {
        let lock = false;
        input.addEventListener('compositionstart', () => {
            lock = true;
        })
        input.addEventListener('compositionend', () => {
            lock = false;
            input.dispatchEvent(new Event('input'))
        })
        input.addEventListener('input', () => {
            if (lock) { return }
            const curValue = input.value;
            const value = deciHandler(input);
            if(oldValue != curValue) {
                oldValue = value;
                input.value = value;
                input.dispatchEvent(new Event('input'))
            }
        })
    }
}

工具函数
export const emptyObj = (obj: any) => {
    let value = JSON.stringify(obj)
    return value == '{}' || value == '[]';
}

// zeroValid表示0/"0"是否有效, false：无效
export const isExist = (value: any, zeroValid = false) => {
    let flag = true;
    // 空字符串认为不存在
    /^\s*$/.test(value) && (flag = false)
    // 如果是一个数，并且0是有效值，认为是不存在的
    if (/^-*\d+(\.\d+)?$/.test(value)) {
        if ((value == 0 && !zeroValid) || value < 0) {
            flag = false;
        }
    } else {
        flag && (flag = !!value);
    }
    //空对象
    emptyObj(value) && (flag = false);
    //空数组
    Array.isArray(value) && value.length == 0 && (flag = false);
    return flag;
}