UNPKG

1.78 kBMarkdownView Raw
1# vue-maskedinput
2
3[![npm](https://img.shields.io/npm/v/vue-maskedinput.svg)](https://www.npmjs.com/package/vue-maskedinput)
4[![npm](https://img.shields.io/npm/dm/vue-maskedinput.svg)](https://www.npmjs.com/package/vue-maskedinput)
5[![CircleCI](https://img.shields.io/circleci/project/github/luyilin/vue-maskedinput.svg)](https://circleci.com/gh/luyilin/vue-maskedinput/tree/master)
6
7A [Vue](https://vuefe.cn/) component for `<input>` masking, built on top of [inputmask-core](https://github.com/insin/inputmask-core).
8
9### [Demo](https://luyilin.github.io/vue-maskedinput/example/dist/index)
10
11## Install
12
13```bash
14yarn add vue-maskedinput
15```
16
17CDN: [UNPKG](https://unpkg.com/vue-maskedinput/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue-maskedinput/) (available as `window.MaskedInput`)
18
19## Usage
20
21```vue
22<template>
23 <masked-input pattern="11/1111" placeholder="11/1111"></masked-input>
24</template>
25
26<script>
27import MaskedInput from 'vue-maskedinput'
28
29export default {
30 components: {
31 MaskedInput
32 }
33}
34</script>
35```
36
37## Props
38
39### `mask` : `string`
40The masking pattern to be applied to the `<input>`.
41
42### `formatCharacters`: `Object`
43Customised format character definitions for use in the pattern.
44
45### `placeholderChar`: `string`
46Customised placeholder character used to fill in editable parts of the pattern.
47
48### `placeholder` : `string`
49A default `placeholder` will be generated from the mask's pattern, but you can pass a `placeholder` prop to provide your own.
50
51### `value` : `string`
52A default value for the mask.
53
54### `hideUnderline` : `Boolean`
55A boolean to hide placeholder's underline
56
57See the [inputmask-core docs](https://github.com/insin/inputmask-core#placeholderchar--string) for details.
58
59## License
60
61MIT &copy; [luyilin](https://github.com/luyilin)