Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/ofcold/security-code

A powerful security code input supports dynamic configuration of the number of input boxes.
https://github.com/ofcold/security-code

code component security-code sms vue vue2 vue3

Last synced: about 2 months ago
JSON representation

A powerful security code input supports dynamic configuration of the number of input boxes.

Awesome Lists containing this project

README

        

# Ofcold Security Code
A powerful security code input supports dynamic configuration of the number of input boxes.

## Features
- Automatic next input box.
- Page initialization automatic countdown.
- The number of custom input boxes.
- Support copy and paste.
- Support tailwindcss by version >=2.0.0

## Installation

```bash
npm install --save ofcold-vue-security-code

// OR

yarn add ofcold-vue-security-code
```

## Usage

```html

```

#### VUE 2.0 And 3.0
```javascript
// Javascript
import InputCode from 'ofcold-vue-security-code';

export default {
data:() => ({
code: ''
}),
components: {
InputCode
}
}

// OR ...
import {defineComponent, ref} from 'vue'
import InputCode from 'ofcold-vue-security-code'

export default defineComponent({
components: {
InputCode
},
setup(props, ctx) {
const code = ref('')

return {
code
}
}
})
```

## API
- `isArray` Deprecated version 2.x please use `returnArray`.
- `returnArray` boolean default false The return data type.
- `val` string|array default ''.
- `len` The code length default `6`.
- `size` The input size default `md` The options are `small`, `default`, `lg`, `xl`.

## Example loading...

![CODE](https://github.com/ofcold/security-code/blob/master/sms.gif?sanitize=true)