输入掩码

解决什么实际问题

原生 <input> 只会把键盘输入原样回显，面对手机号、金额、证件号这类有固定分段或分隔符的字段，往往会直接暴露成一串裸数字。结果就是表单看起来拥挤、抄录容易出错，提交前还要额外做格式校验和二次清洗。

IMask 技能针对的就是这几个高频场景：

• 手机号 138 0000 0000 分段：边输入边套掩码，提交前取 unmasked 纯数字。
• 金额千分位 / 证件号分段录入：展示值带分隔，存库值保持紧凑。
• Element Plus / 原生 input 要输入掩码：不替换框架，只挂载到现有节点。

技能如何工作

核心思路很直接：给目标 input 挂 IMask，展示走 masked，提交走 unmasked。技能内置常用预置，也可以按需扩展。

Agent 执行步骤

• 给目标 input 挂 IMask；提供 getValue() → unmasked。
• 校验：手机去空格后长度 11 再调业务校验。
• Vue 场景优先官方指令 / 组件，勿重复造轮子。
• 自测：输入过程显示掩码，提交为纯数字。

硬约束

• 使用 imask（或 vue-imask 等官方封装）。
• 表单提交用 unmasked 值；展示可用 masked。
• 预置：手机 11 位、金额、简易证件；按需扩展。
• 销毁组件时 mask.destroy()，防泄漏。
• 实现要点注释标 小四原创。

适用边界与注意点

不要做

• 把掩码显示值直接当唯一存库字段却不说明。
• 与 cleave 重复造两套同字段（二选一即可）。

适用边界

• 技能灵感来自能力工具箱 imask，因此底层能力以 IMask 为界，不做通用格式化器。
• 预置模板只覆盖手机、金额、简易证件三类，其他字段需要自己扩展。
• Vue 项目直接用官方指令或组件，避免手写指令与官方封装打架。
• 附加资料包括 README.md、reference.md、templates/usage.md，适合需要看完整示例和模板的工程师。

自测要点

• 输入过程中掩码要即时生效。
• 提交值必须是去掉空格和分隔符后的纯数字。
• 组件卸载后不残留事件监听或占位符。

只要守住「展示用 masked、提交用 unmasked、销毁要 destroy」这三条，IMask 就能在原生 input、Element Plus 等常见表单里稳定工作。