vue3 + elementPlus 实现el-input只允许输入数字

引:https://blog.csdn.net/weCat_s/article/details/120891126?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0-120891126-blog-120184742.pc_relevant_landingrelevant&spm=1001.2101.3001.4242.1&utm_relevant_index=3
\\mian.ts
//el-input 在限制输入长度后限制输入类型为输入数字
//使用方法:在el-input 属性中添加 v-number
function mount() {
    const app = createApp(App)
const getInput = (el: HTMLElement): HTMLInputElement | null => el instanceof HTMLInputElement ? el : el.querySelector('input')
let inputHandler = () => {}
app.directive('number', {
        mounted (el: HTMLElement, { arg, value }) {
            const input: HTMLInputElement = <HTMLInputElement>getInput(el)
            if (input) {
                // 小数正则
                const decimal: string = arg ? `(\\.\\d{0,${arg}})?` : ''
                // 整数正则
                const integer: string = value ? `(0|[1-9]\\d{0, ${value - 1}})` : '\\d*'
                const regExp: RegExp = new RegExp((integer + decimal), 'g')
                inputHandler = () => {
                    // 替换所有的非数字项
                    // 如果输入的数字不符合正则表达式,则替换为''
                    input.value = input.value.toString().trim().replace(/[^\d.]/g, '')?.match?.(regExp)?.[0] ?? ''
                }
                // 在文本框输入的时候触发
                input.addEventListener('input', inputHandler, true)
            }
        },
        unmounted (el: HTMLElement) {
            // 解除绑定的时候去除事件
            const input: HTMLInputElement = <HTMLInputElement>getInput(el)
            input.removeEventListener('input', inputHandler, true)
        }
    })
	return app
}
\\页面引用
<el-input
   v-number
   v-model="item.value"
   placeholder="请输入"
></el-input>
posted @ 2023-02-28 17:05  Chaplink  阅读(2184)  评论(0编辑  收藏  举报