MaskInput 掩码输入框

掩码输入框（MaskInput）基于 TInput 封装，通过集成 IMask.js 提供输入格式化能力，适用于电话、日期、信用卡等需要固定格式的场景。

基础用法

通过 mask 属性定义输入格式，v-model 双向绑定格式化后的值。

<TMaskInput mask="000-0000-0000" placeholder="000-0000-0000"/>
<TMaskInput mask="00/00/0000" placeholder="00/00/0000"/>
<TMaskInput mask="0000 0000 0000 0000" placeholder="0000 0000 0000 0000"/>
<TMaskInput mask="00:00" placeholder="00:00"/>

电话号码

Tabler 的典型用法：电话掩码配合国际化格式。

<TMaskInput mask="(00) 0000-0000" placeholder="(00) 0000-0000" autocomplete="off"/>

双向绑定

v-model 绑定格式化后的值，注意经过 IMask 处理后获得的是格式化的字符串。

查看代码

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

const phone = ref('')
</script>
<template>
  <TMaskInput v-model="phone" mask="000-0000-0000" placeholder="000-0000-0000"/>
  <div>格式化值：{{ phone }}</div>
</template>

任意掩码

mask 支持 IMask 的所有掩码类型，包括数字范围、正则匹配等高级规则。

查看代码

<TMaskInput :mask="{ mask: Number, min: 0, max: 100 }" placeholder="0-100"/>
<TMaskInput :mask="{ mask: Number, min: 0, max: 100, scale: 0, suffix: '%' }" placeholder="0-100%"/>

与其他 TInput 特性组合

TMaskInput 继承 TInput 的所有特性，包括图标、尺寸、圆角、验证状态等。

查看代码

<TMaskInput size="lg" mask="000-0000-0000" placeholder="000-0000-0000"/>
<TMaskInput size="sm" rounded mask="000-0000-0000" placeholder="000-0000-0000"/>
<TMaskInput disabled mask="000-0000-0000" placeholder="000-0000-0000"/>
<TMaskInput validation="invalid" mask="000-0000-0000" placeholder="000-0000-0000"/>

API

TMaskInput 属性 (Props)

属性名	说明	类型	默认值
mask	掩码规则（字符串或 IMask 配置对象）	string | Record<string, any>	—
type	输入框原生类型	string	'text'
placeholder	占位符文本	string	undefined
size	输入框尺寸	'sm' | 'lg'	undefined
rounded	圆角风格	boolean	false
flush	无边框风格	boolean	false
disabled	禁用状态	boolean	false
readonly	只读状态	boolean	false
maxlength	最大字符长度	number	undefined
name	原生 name 属性	string	undefined
id	原生 id 属性	string	undefined
autocomplete	自动补全	string	undefined
required	是否必填	boolean	false
prepend-icon	前置图标	Icon	undefined
append-icon	后置图标	Icon	undefined
prepend-text	前置文本	string	undefined
append-text	后置文本	string	undefined
validation	验证状态	'valid' | 'invalid'	undefined
block	块级宽度（w-100）	boolean	false

TMaskInput 事件 (Emits)

事件名	说明	回调参数
update:modelValue	输入值更新时触发（格式化后的值）	(value: string) => void

TMaskInput 插槽 (Slots)

插槽名	说明
prepend	前置内容（出现在 <input> 之前）
append	后置内容（出现在 <input> 之后）