vue.js 依赖缓存_适用于Vue.js和Vanilla JS的简单零依赖输入掩码-CSDN博客

vue.js 依赖缓存

面膜 (Maska)

Simple zero-dependency input mask for Vue.js and vanilla JS.

Vue.js和vanilla JS的简单零依赖输入掩码。

No dependencies
没有依赖
Small size (~2 Kb gziped)
体积小(约2 Kb压缩)
Ability to define custom tokens
定义自定义令牌的能力
Supports repeat symbols and dynamic masks
支持重复符号和动态蒙版
Works on any input (custom or native)
适用于任何输入(自定义或本机)

安装 (Install)

npm install maska

To load latest version from CDN you can use:

要从CDN加载最新版本，您可以使用：

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/maska.js"></script>

Vue.js的用法 (Usage with Vue.js)

If you load Vue.js via <script> then just add v-maska directive to your input:

如果通过<script>加载Vue.js，则只需在输入中添加v-maska指令即可：

<input v-maska="'###'">

You can add custom tokens by passing in object instead of string to directive:

您可以通过将对象而不是字符串传递给指令来添加自定义标记：

<input v-maska="{ mask: 'Z*', tokens: { 'Z': { pattern: /[а-яА-Я]/ }}}">

With bundlers you can add global directive:

使用捆绑器，您可以添加全局指令：

import Maska from 'maska'
Vue.use(Maska)

or import maska directive for local usage in component:

或导入maska指令以在组件中本地使用：

<template>
    <form>
        <input v-maska="'###'">
    </form>
</template>

<script>
import { maska } from 'maska'

export default {
    directives: { maska }
}
</script>

与香草JS搭配使用 (Usage with vanilla JS)

Just load script maska.js and init it, passing element(s) or document.querySelector expression:

只需加载脚本maska.js并将其初始化，然后传递元素或document.querySelector表达式即可：

var mask = Maska.create('.masked');

You can pass custom tokens while initialization:

您可以在初始化时传递自定义标记：

var mask = Maska.create('.masked', {
    tokens: { 'Z': { pattern: /[а-яА-Я]/ }}
});

You can destroy mask like that:

您可以这样破坏面具：

var mask = Maska.create('.masked');
mask.destroy();

遮罩语法 (Mask syntax)

Default tokens:

默认令牌：

{
    '#': { pattern: /[0-9]/ },
    'X': { pattern: /[0-9a-zA-Z]/ },
    'S': { pattern: /[a-zA-Z]/ },
    'A': { pattern: /[a-zA-Z]/, uppercase: true },
    'a': { pattern: /[a-zA-Z]/, lowercase: true },
    '!': { escape: true },
    '*': { repeat: true }
}

Escape symbol escapes next token (mask !# will render #)
转义符号转义下一个令牌(掩码!#将呈现# )
Repeat symbol allows repeating current token until it’s valid (e.g. mask #* for all digits or A* A* for CARDHOLDER NAME)
重复符号允许重复当前令牌直到有效(例如，掩码#*用于所有数字或A* A*用于CARDHOLDER NAME )

You can add your own tokens by passing them in maska directive or create method at initialization (see above). Important: pattern field should be JS regular expression (/[0-9]/) or string without delimiters ("[0-9]").

您可以通过将其传递给maska指令来添加您自己的令牌，也可以在初始化时create方法(请参见上文)。 重要提示 ： pattern字段应为JS 正则表达式 ( /[0-9]/ )或不带分隔符的字符串 ( "[0-9]" )。

动态蒙版 (Dynamic masks)

To use several masks on single input, pass array instead of string as mask value.

要在单个输入上使用多个掩码，请传递数组而不是字符串作为掩码值。

You could use it with Vue directives:

您可以将其与Vue指令一起使用：

<input v-maska="['+1 (###) ##-##-##', '+1 (###) ###-##-##']">

<input v-maska="{ mask: ['!#HHHHHH', '!#HHHHHH-HH'], tokens: { 'H': { pattern: /[0-9a-fA-F]/, uppercase: true }}}">

and with vanilla JS attribute, but make sure that mask value is proper JSON, so use double quotes inside array:

并且具有香草JS属性，但请确保mask值是正确的JSON ，因此请在数组内使用双引号：

<input data-mask='["# cm", "#.# cm", "#.## cm"]'>

翻译自: https://vuejsexamples.com/simple-zero-dependency-input-mask-for-vue-js-and-vanilla-js/

vue.js 依赖缓存