希望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>

[Wei-Ba]

想要没延迟只能在input事件中直接改input的value
你让要vue来改不管怎么搞也是渲染完成之后一帧的事了

<script lang="ts" setup>
import { ref } from 'vue'

const msg = ref('message')

const handleInput = (e: Event) => {
  const el = e.target as HTMLInputElement
  msg.value = el.value = el.value.replace(/[^\d]/g, '')
}
</script>

<template>
  <input type="text" :value="msg" @input="handleInput" />
  <div>{{msg}}</div>
</template>

<script lang="ts" setup>
import { ref, useTemplateRef , watch } from 'vue'

const msg = ref('message')

const el = useTemplateRef('input')
watch(msg, () => {
  if(!el.value) return
  msg.value = el.value.value = msg.value.replace(/[^\d]/g, '')
})
</script>

<template>  
  <input ref="input" type="text" v-model="msg" />
  <div>{{msg}}</div>
</template>