vue掩码处理_专为Vue.js创建的轻量级且无依赖的掩码输入

最新推荐文章于 2026-06-06 09:19:14 发布

翻译最新推荐文章于 2026-06-06 09:19:14 发布 · 1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://vuejsexamples.com/a-lightweight-and-dependency-free-mask-input-created-specific-for-vue-js/

介绍了一个专为Vue.js设计的轻量级（2KB压缩后）且无依赖的掩码输入插件，包括安装和两种使用方式：全局和局部（组件内及指令）。还提及了插件的代币和属性。

vue掩码处理

面具 (The Mask)

A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js

专为Vue.js创建的轻量级(压缩2KB)和无依赖掩码输入

View demo 查看演示 Download Source 下载源

安装 (Install)

yarn add vue-the-mask
or
npm i -S vue-the-mask

用法(两种口味) (Usage (two flavors))

全球 (Global)

import VueTheMask from 'vue-the-mask'
Vue.use(VueTheMask)

本地(组件内部) (Local (inside the component))

import {TheMask} from 'vue-the-mask'
export default {
  components: {TheMask}
}

本地(作为指令) (Local (as directive))

import {mask} from 'vue-the-mask'
export default {
  directives: {mask}
}

代币 (Tokens)

'#': {pattern: /\d/},
'X': {pattern: /[0-9a-zA-Z]/},
'S': {pattern: /[a-zA-Z]/},
'A': {pattern: /[a-zA-Z]/, transform: v => v.toLocaleUpperCase()},
'a': {pattern: /[a-zA-Z]/, transform: v => v.toLocaleLowerCase()},
'!': {escape: true}

物产 (Properties)

Property	Required	Type	Default	Description
value	false	String		Input value or v-model
mask	true	String, Array		Mask pattern
masked	false	Boolean	false	emit value with mask chars, default is raw
placeholder	false	String		Same as html input
type	false	String	'text'	Input type (email, tel, number, ...)
tokens	false	Object	tokens	Custom tokens for mask

属性	需要	类型	默认	描述
值	假	串		输入值或v模型
面具	真正	字符串，数组		遮罩图案
蒙面的	假	布尔型	假	发出带有掩码字符的值，默认为raw
占位符	假	串		与html输入相同
类型	假	串	'文本'	输入类型(电子邮件，电话，号码等)
代币	假	目的	代币	遮罩的自定义标记

翻译自: https://vuejsexamples.com/a-lightweight-and-dependency-free-mask-input-created-specific-for-vue-js/

vue掩码处理

标签

#vue #java #正则表达式 #eclipse #anaconda