希望defineModel能够拓展一个input输入过滤器方法

[SuperLiii]

• 当前VUE版本:3.5.17

简要

我希望利用defineModel实现一个手机号输入框,并且它具有输入校验功能(过滤非法字符)

简单来说,就是不希望用户能够输入规则以外的字符(比如字母/符号)又或者是总体文本长度.

尝试

我尝试了set方法,但是它return的值不会立即反馈到input本身(会有一个奇怪的延迟).

所以我不得不使用nextTick和一些判断,重新给input赋值

想法

所以我希望,defineModel的set能够解决这个问题,又或者能够增加一个类似filter/check字段来实现类似功能

代码

这是目前我想出的变相解决方案,仅供参考

<template>

    <div>
        <input type="tel" v-model="model" name="phoneNumber" placeholder="请输入手机号" pattern="1[3-9]\d{9}" />
        <div>ccc:{{ model }}</div>
    </div>
</template>



<script setup lang="ts">
import { nextTick } from 'vue';
const model = defineModel({
    type: String,
    default: "",
    /*  validator: (v: string) => {
         return /^1[3-9]\d{9}$/.test(v);
     }, */
    /*电话号码输入动态矫正 */
    set: (v1: string) => {
        let v2 = v1.replace(/\D/g, '') //剔除所有非数字字符
        if (v2.length > 11) v2 = v2.slice(0, 11);  //数字长度最大11位
        //下面代码有点脏 但是为了坚持使用defineModel我忍了..
        //set方法返回的值并不能第一时间反馈到自身的input上 会有一些延迟
        //这将导致动态校正失效,用户依旧可以看到错误的输入(比如字母)
        //你问我为什么不将input type改为number?
        //因为这该死的number会显示出一个调节按钮 通过修改css的方法在不同浏览器中会产生兼容问题
        //期待vue有一天能够出个新选项,解决这种问题(当前版本3.5.17)
        if (v1 !== v2) nextTick(() => {
            if (v2 === "") { nextTick(() => { model.value = ""; }); v2 = "1"; }
            model.value = v2;
        });
        return v2 === "" ? v1 : v2;
    },

})





</script>


<style scoped lang="less"></style>