创建vue项目安装依赖_专为Vue创建的轻量级且无依赖的输入屏蔽库

创建vue项目安装依赖

Vue输入外观 (Vue Input Facade)

A lightweight and dependency free input masking library created specific for Vue.

专为Vue创建的轻量级且无依赖的输入屏蔽库。

View Demo 查看演示 View Github 查看Github

正在安装 (Installing)

npm i vue-input-facade

yarn add vue-input-facade

输入 (Importing)

全球范围 (Globally)

Installs the component, directive and filter for your entire application.

为整个应用程序安装组件，指令和过滤器。

import InputFacade from 'vue-input-facade'
Vue.use(InputFacade)

在本地 (Locally)

Install per component as needed

根据需要安装每个组件

import { InputFacade, facade, filter } from 'vue-input-facade'

export default {
  components: { InputFacade },
  directives: { facade },
  filters: { facade: filter },
  // ... rest of component config
}

默认掩码令牌 (Default Mask Tokens)

• S = alpha characters

  S =字母字符

• # = numerical characters

  # =数字字符

• X = alpha numerical characters

  X =字母数字字符

• A = alpha characters, transformed to uppercase

  A =字母字符，转换为大写

• a = alpha characters, transformed to lowercase

  a =字母字符，转换为小写

• \ = escape any of the above characters

  \ =转义以上任何字符

See the token source file for definition signature

请参阅令牌源文件以获取定义签名

用法 (Usage)

作为组件 (As Component)

<label>Phone Number</label>
<input-facade mask="(###) ###-####" name="phoneNumber" type="tel" />

作为指令 (As Directive)

<label>Date</label>
<input type="text" v-facade="'##/##/##'" />

迁移现有项目 (Migrating existing projects)

If you are migrating an existing project to vue-input-facade from another plugin and dont want to touch the whole codebase. You may pass options during plugin installation to override the default tokens or directive name.

如果您要将现有项目从另一个插件迁移到vue-input-facade，并且不想涉及整个代码库。 您可以在插件安装期间传递选项，以覆盖默认标记或指令名称。

import InputFacade from 'vue-input-facade'

// migrating from v-mask
const options = {
  // rename the directive from: v-facade to: v-mask
  name: 'mask',

  // use these tokens instead of the default
  tokens: {
    '#': { pattern: /\d/ },
    'A': { pattern: /[a-z]/i },
    'N': { pattern: /[0-9a-z]/i },
    'X': { pattern: /./ }
  }
}

Vue.use(InputFacade, options)

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

创建vue项目安装依赖