创建vue项目安装依赖
Vue输入外观 (Vue Input Facade)
A lightweight and dependency free input masking library created specific for Vue.
专为Vue创建的轻量级且无依赖的输入屏蔽库。
正在安装 (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 charactersS
=字母字符#
= numerical characters#
=数字字符X
= alpha numerical charactersX
=字母数字字符A
= alpha characters, transformed to uppercaseA
=字母字符,转换为大写a
= alpha characters, transformed to lowercasea
=字母字符,转换为小写\
= 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)
创建vue项目安装依赖