Vue the mask typescript

Vue the mask typescript

A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js

yarn add vue-the-mask or npm i -S vue-the-mask 
import VueTheMask from 'vue-the-mask'
Vue.use(VueTheMask)

Local (inside the component)

import TheMask> from 'vue-the-mask'
export default
components: TheMask>
>
import mask> from 'vue-the-mask'
export default
directives: mask>
>
'#': pattern: /\d/>,
'X': pattern: /[0-9a-zA-Z]/>,
'S': pattern: /[a-zA-Z]/>,
'A': pattern: /[a-zA-Z]/, transform: v => v.toLocaleUpperCase()>,
'a': pattern: /[a-zA-Z]/, transform: v => v.toLocaleLowerCase()>,
'!': escape: true>
Property Required Type Default Description
value false String Input value or v-model
mask true String, Array Mask pattern
masked false Boolean false emit value with mask chars, default is raw
placeholder false String Same as html input
type false String ‘text’ Input type (email, tel, number, . )
tokens false Object tokens Custom tokens for mask

We understand that money format is a totally different domain, which needs another specific component. You can use https://github.com/vuejs-tips/v-money

  1. https://github.com/nosir/cleave.js
  2. https://github.com/text-mask/text-mask
  3. https://github.com/igorescobar/jQuery-Mask-Plugin
  4. https://github.com/fernandofleury/vanilla-masker
  5. https://github.com/angular-ui/ui-mask
  6. https://github.com/insin/inputmask-core
  7. https://github.com/niksmr/vue-masked-input
  8. https://github.com/probil/v-mask
  9. https://github.com/moip/awesome-mask
  10. https://github.com/the-darc/string-mask
  11. https://github.com/romulobrasil/PureMask.js
  12. https://github.com/devindex/vue-mask

You’re free to contribute to this project by submitting issues and/or pull requests. This project is test-driven, so keep in mind that every change and new feature should be covered by tests. Your name will be added to the hall of fame 😉

This project is licensed under MIT License

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

vuejs-tips/vue-the-mask

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js

yarn add vue-the-mask or npm i -S vue-the-mask 
import VueTheMask from 'vue-the-mask' Vue.use(VueTheMask)

Local (inside the component)

import TheMask> from 'vue-the-mask' export default  components: TheMask> >
import mask> from 'vue-the-mask' export default  directives: mask> >
'#': pattern: /\d/>, 'X': pattern: /[0-9a-zA-Z]/>, 'S': pattern: /[a-zA-Z]/>, 'A': pattern: /[a-zA-Z]/, transform: v => v.toLocaleUpperCase()>, 'a': pattern: /[a-zA-Z]/, transform: v => v.toLocaleLowerCase()>, '!': escape: true>
Property Required Type Default Description
value false String Input value or v-model
mask true String, Array Mask pattern
masked false Boolean false emit value with mask chars, default is raw
placeholder false String Same as html input
type false String ‘text’ Input type (email, tel, number, . )
tokens false Object tokens Custom tokens for mask

We understand that money format is a totally different domain, which needs another specific component. You can use https://github.com/vuejs-tips/v-money

  1. https://github.com/nosir/cleave.js
  2. https://github.com/text-mask/text-mask
  3. https://github.com/igorescobar/jQuery-Mask-Plugin
  4. https://github.com/fernandofleury/vanilla-masker
  5. https://github.com/angular-ui/ui-mask
  6. https://github.com/insin/inputmask-core
  7. https://github.com/niksmr/vue-masked-input
  8. https://github.com/probil/v-mask
  9. https://github.com/moip/awesome-mask
  10. https://github.com/the-darc/string-mask
  11. https://github.com/romulobrasil/PureMask.js
  12. https://github.com/devindex/vue-mask

You’re free to contribute to this project by submitting issues and/or pull requests. This project is test-driven, so keep in mind that every change and new feature should be covered by tests. Your name will be added to the hall of fame 😉

This project is licensed under MIT License

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typescript support #113

Typescript support #113

Comments

Does this library support typescript? I did not find any reference .

The text was updated successfully, but these errors were encountered:

I couldn’t find typings as well, but i found another solution. You can check it out bellow.

I created a file named third-parties.d.ts in the _types folder, in my src folder (just for organization) with the following content:

declare module ‘vue-the-mask’;

You can put more declarations here.

And in my tsconfig.json, i setted my custom type with:

«typeRoots»: [ «node_modules/@types», «./src/_types/third-parties.d.ts» ],

Yo, why’d this get closed? Surely someone can write a type for this.

This should cover all use-cases:

declare module 'vue-the-mask'  import  AsyncComponent, Component, DirectiveFunction, DirectiveOptions, PluginFunction, > from 'vue'; // Local component: const TheMask: Componentany, any, any, any> | AsyncComponentany, any, any, any>; // Local directive: const mask: DirectiveFunction | DirectiveOptions; // Global plugin / default: const VueTheMask: PluginFunctionany> &  TheMask: Componentany, any, any, any> | AsyncComponentany, any, any, any>; mask: DirectiveFunction | DirectiveOptions; >; export  TheMask, mask >; export default VueTheMask; >

Источник

vue-the-mask

We understand that money format is a totally different domain, which needs another specific component. You can use this one: v-money.

Install

yarn add vue-the-mask or npm i -S vue-the-mask 

Usage

// Global import VueTheMask from 'vue-the-mask' Vue.use(VueTheMask) // Local Component import from 'vue-the-mask' export default < components: > // Local Directive import from 'vue-the-mask' export default < directives: > 

Properties

Property Required Type Default Description
value false String Input value or v-model
mask true String, Array Mask pattern
masked false Boolean false emit value with mask chars, default is raw
placeholder false String Same as html input
type false String ‘text’ Input type (email, tel, number, . )
tokens false Object tokens Custom tokens for mask

Other Solutions

  1. https://github.com/nosir/cleave.js
  2. https://github.com/text-mask/text-mask
  3. https://github.com/igorescobar/jQuery-Mask-Plugin
  4. https://github.com/fernandofleury/vanilla-masker
  5. https://github.com/angular-ui/ui-mask
  6. https://github.com/insin/inputmask-core
  7. https://github.com/niksmr/vue-masked-input
  8. https://github.com/probil/v-mask
  9. https://github.com/moip/awesome-mask
  10. https://github.com/the-darc/string-mask
  11. https://github.com/romulobrasil/PureMask.js
  12. https://github.com/devindex/vue-mask

Currency

Источник

Vue the mask typescript

A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js

yarn add vue-the-mask or npm i -S vue-the-mask 
import VueTheMask from 'vue-the-mask'
Vue.use(VueTheMask)

Local (inside the component)

import TheMask> from 'vue-the-mask'
export default
components: TheMask>
>
import mask> from 'vue-the-mask'
export default
directives: mask>
>
'#': pattern: /\d/>,
'X': pattern: /[0-9a-zA-Z]/>,
'S': pattern: /[a-zA-Z]/>,
'A': pattern: /[a-zA-Z]/, transform: v => v.toLocaleUpperCase()>,
'a': pattern: /[a-zA-Z]/, transform: v => v.toLocaleLowerCase()>,
'!': escape: true>
Property Required Type Default Description
value false String Input value or v-model
mask true String, Array Mask pattern
masked false Boolean false emit value with mask chars, default is raw
placeholder false String Same as html input
type false String ‘text’ Input type (email, tel, number, . )
tokens false Object tokens Custom tokens for mask

We understand that money format is a totally different domain, which needs another specific component. You can use https://github.com/vuejs-tips/v-money

  1. https://github.com/nosir/cleave.js
  2. https://github.com/text-mask/text-mask
  3. https://github.com/igorescobar/jQuery-Mask-Plugin
  4. https://github.com/fernandofleury/vanilla-masker
  5. https://github.com/angular-ui/ui-mask
  6. https://github.com/insin/inputmask-core
  7. https://github.com/niksmr/vue-masked-input
  8. https://github.com/probil/v-mask
  9. https://github.com/moip/awesome-mask
  10. https://github.com/the-darc/string-mask
  11. https://github.com/romulobrasil/PureMask.js
  12. https://github.com/devindex/vue-mask

You’re free to contribute to this project by submitting issues and/or pull requests. This project is test-driven, so keep in mind that every change and new feature should be covered by tests. Your name will be added to the hall of fame 😉

This project is licensed under MIT License

Источник

Читайте также:  Плавное появление границы css
Оцените статью