基于PureMask.js的vue.js的超小输入蒙版库

Vue输入遮罩 (Vue input mask)

Super tiny input mask library for vue.js based on PureMask.js (~2kb) exposed as directive. No dependencies.

基于PureMask.js(〜2kb)的vue.js的超小输入掩码库公开为指令。 没有依赖关系。

View demo 查看演示 Download Source 下载源

：cd：安装 (:cd: Installation)

This version requires Vue 2.X. If you are looking for Vue 1.X, check it here.

此版本需要Vue2.X。 如果您正在寻找Vue 1.X， 请在此处进行检查 。

npm install v-mask

初始化 (Initialization)

ES2015(Webpack / Rollup / Browserify / etc) (ES2015 (Webpack/Rollup/Browserify/etc))

import Vue from 'vue'

// As a plugin
import VueMask from 'v-mask'
Vue.use(VueMask);

// Or as a directive
import { VueMaskDirective } from 'v-mask'
Vue.directive('mask', VueMaskDirective);

UMD(浏览器) (UMD (Browser))

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-mask/dist/v-mask.min.js"></script>
<script>
// As a plugin
Vue.use(VueMask.VueMaskPlugin);

// Or as a directive
Vue.directive('mask', VueMask.VueMaskDirective);
</script>

：火箭：用法 (:rocket: Usage)

<input type="text" v-mask="'####-##'" v-model="myInputModel">
<!-- OR -->
<input type="text" v-mask="nameOfVariableWithMask" v-model="myInputModel">

Notice: v-model is required starting from v1.1.0, because a lot of bugs with HTMLElement event listeners and sync with Vue internals.

注意： v-model需要从启动v1.1.0 ，因为有很多 的 错误与HTML元素事件侦听器和同步与Vue公司的内部。

There is no reason to support using this lib for using without v-model but open the door for using on custom inputs.

没有理由支持使用此lib在不使用v-model情况下使用，而是为在自定义输入上使用打开了大门。

：gear：配置 (:gear: Configs)

List of supported placeholders:

支持的占位符列表：

Value	Format
#	Number (0-9)
A	Letter in any case (a-z,A-Z)
N	Number or letter
X	Any symbol
?	Optional (next character)

值	格式
＃	号码(0-9)
一个	在任何情况下的字母(az，AZ)
ñ	数字或字母
X	任何符号
？	可选(下一个字符)

：注射器：测试 (:syringe: Tests)

Jest is used for unit-tests.

笑话用于单元测试。

You can run tests by typing this command in your console:

您可以通过在控制台中键入以下命令来运行测试：

npm test

Nightwatch is used of E2E testing.

Nightwatch用于端到端测试。

Check the v-mask--demo repo for more details

检查v-mask--demo仓库以获取更多详细信息

翻译自: https://vuejsexamples.com/super-tiny-input-mask-library-for-vue-js-based-on-puremask-js/