Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/ofcold/security-code
- Owner: ofcold
- License: mit
- Created: 2017-10-29T02:30:48.000Z (about 7 years ago)
- Default Branch: 2.1-typescript
- Last Pushed: 2021-08-05T13:18:11.000Z (over 3 years ago)
- Last Synced: 2024-10-31T06:23:33.345Z (about 2 months ago)
- Topics: code, component, security-code, sms, vue, vue2, vue3
- Language: TypeScript
- Homepage:
- Size: 2.56 MB
- Stars: 62
- Watchers: 9
- Forks: 12
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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)