Vue.js的微小输入掩码库–Input Facade

Vue.js的微小输入掩码库–Input Facade
插件名称 vue-input-facade
版本号 v1.3.4
发布时间 2020年6月21日
插件作者 RonaldJerez

输入外观是一种轻量级的输入掩码组件/指令,可使用自定义规则来屏蔽您的输入字段。

安装和下载:

# Yarn
$ yarn add vue-input-facade

# NPM
$ npm install vue-input-facade --save

如何使用它:

1.导入并注册组件。

import InputFacade from 'vue-input-facade'
Vue.use(InputFacade)
// or
import { InputFacade, facade, filter } from 'vue-input-facade'
export default {
  components: { InputFacade },
  directives: { facade },
  filters: { facade: filter },
}

2.将输入掩码组件插入模板,并使用以下标记定义您自己的规则。

  • S =字母字符
  • # =数字字符
  • X =字母数字字符
  • A =字母字符,转换为大写
  • a =字母字符,转换为小写
  • \ =转义以上任何字符
<input-facade mask="(###) ###-####" name="phoneNumber" type="tel" />

3.或将其用作指令。

<input type="text" type="tel" v-facade="'(###) ###-####'" />

变更日志:

v1.3.4(05/09/2021)

  • 固定:如果event.inputType不支持,则假定insertText

v1.3.3(04/28/2020)

  • 修复了Firefox的掩码值可能溢出的问题

v1.3.2(07/30/2020)

  • 如果初始值为null,则避免发出输入事件

v1.3.1(06/18/2020)

  • 在Firefox中从Vuetify修复了第二个输入事件的遮罩