vue掩码处理
面具 (The Mask)
A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js
专为Vue.js创建的轻量级(压缩2KB)和无依赖掩码输入
安装 (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掩码处理