Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/Scrum/vue-restricted-input

Input mask library for vue.js based on credit-card-input-mask
https://github.com/Scrum/vue-restricted-input

Last synced: 2 months ago
JSON representation

Input mask library for vue.js based on credit-card-input-mask

Host: GitHub
URL: https://github.com/Scrum/vue-restricted-input
Owner: Scrum
License: mit
Created: 2019-05-21T14:03:45.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2023-03-06T05:35:51.000Z (over 1 year ago)
Last Synced: 2024-01-24T19:34:46.223Z (5 months ago)
Language: TypeScript
Homepage:
Size: 925 KB
Stars: 11
Watchers: 2
Forks: 2
Open Issues: 5
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
- Funding: .github/funding.yml
- License: license

Lists

awesome-vue - vue-restricted-input - Input mask library for vue.js based on [restricted-input](https://github.com/braintree/restricted-input) (Components & Libraries / UI Components)
awesome-vue - vue-restricted-input - Input mask library for vue.js based on [restricted-input](https://github.com/braintree/restricted-input) (Components & Libraries / UI Components)
awesome-vue - vue-restricted-input - Input mask library for vue.js based on [restricted-input](https://github.com/braintree/restricted-input) (Components & Libraries / UI Components)
awesome-vue - vue-restricted-input - Input mask library for vue.js based on [restricted-input](https://github.com/braintree/restricted-input) (Components & Libraries / UI Components)
awesome-vue - vue-restricted-input - Input mask library for vue.js based on [restricted-input](https://github.com/braintree/restricted-input) (Components & Libraries / UI Components)
awesome-vue - vue-restricted-input - Input mask library for vue.js based on [restricted-input](https://github.com/braintree/restricted-input) (Components & Libraries / UI Components)
awesome-vue - vue-restricted-input - Input mask library for vue.js based on [restricted-input](https://github.com/braintree/restricted-input) (Components & Libraries / UI Components)
awesome-vue - vue-restricted-input - Input mask library for vue.js based on [restricted-input](https://github.com/braintree/restricted-input) (Components & Libraries / UI Components)
awesome-vue - vue-restricted-input - Input mask library for vue.js based on [restricted-input](https://github.com/braintree/restricted-input) (Components & Libraries / UI Components)
awesome-vue - vue-restricted-input - Input mask library for vue.js based on [restricted-input](https://github.com/braintree/restricted-input) (UI Components / Form)
awesome-vue - vue-restricted-input - Input mask library for vue.js based on [restricted-input](https://github.com/braintree/restricted-input) (Components & Libraries / UI Components)
awesome-vue - vue-restricted-input - Input mask library for vue.js based on credit-card-input-mask ` 📝 5 months ago` (UI Components [🔝](#readme))

README

        # vue-restricted-input

> Input mask for vue.js based on [credit-card-input-mask](https://github.com/Scrum/credit-card-input-mask)

[![vue.js](https://img.shields.io/static/v1?label=Vue.js&message=3&color=4FC08D&style=flat-square&logo=vue.js&logoColor=ffffff)](https://vuejs.org/)[![node](https://img.shields.io/node/v/vue-restricted-input.svg?style=flat-square)]()[![npm version](https://img.shields.io/npm/v/vue-restricted-input.svg?style=flat-square)](https://www.npmjs.com/package/vue-restricted-input)[![XO code style](https://badgen.net/xo/status/chalk?style=flat-square)](https://github.com/sindresorhus/xo)[![Coveralls status](https://img.shields.io/coveralls/Scrum/vue-restricted-input.svg?style=flat-square)](https://coveralls.io/r/Scrum/vue-restricted-input)

[![npm downloads](https://img.shields.io/npm/dm/vue-restricted-input.svg?style=flat-square)](https://www.npmjs.com/package/vue-restricted-input)[![npm](https://img.shields.io/npm/dt/vue-restricted-input.svg?style=flat-square)](https://www.npmjs.com/package/vue-restricted-input)

## Why ?

[credit-card-input-mask](https://github.com/Scrum/credit-card-input-mask) perfect work with carriage position, fast.

## Install

```bash

$ npm install vue-restricted-input 

```

> **Note:** This project is compatible with node v12+

## Usage

***`main.ts`***

```javascript

import { createApp } from 'vue';

import {VueRestrictedInputDirective} from 'vue-restricted-input';

import App from './App.vue';

const app = createApp(App);

app.directive('mask', VueRestrictedInputDirective);

```

***`App.vue`***

```vue

  

  import {ref} from 'vue';

  const value = ref('11111111');

  const mask = ref('{{9999}} {{9999}}');

```

## Related

- [credit-card-input-mask](https://github.com/Scrum/credit-card-input-mask) - Allow restricted character sets in `input` elements.