All Projects → ofcold → security-code

ofcold / security-code

Licence: MIT license
A powerful security code input supports dynamic configuration of the number of input boxes.

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to security-code

toggle
Vue 3 toggle component with labels, custom slots and styling options (+Tailwind CSS support).
Stars: ✭ 75 (+19.05%)
Mutual labels:  vue2, vue3
slider
Vue 3 slider component with multihandles, tooltips merging and formatting (+Tailwind CSS support).
Stars: ✭ 162 (+157.14%)
Mutual labels:  vue2, vue3
vue-pattern-input
Use RegExp to limit input
Stars: ✭ 25 (-60.32%)
Mutual labels:  vue2, vue3
vue-ray
Debug your Vue 2 & 3 code with Ray to fix problems faster
Stars: ✭ 48 (-23.81%)
Mutual labels:  vue2, vue3
fluent-vue
Internationalization plugin for Vue.js
Stars: ✭ 137 (+117.46%)
Mutual labels:  vue2, vue3
vue-input-autowidth
A Vue.js directive that automatically resizes an input's width to fit its contents.
Stars: ✭ 94 (+49.21%)
Mutual labels:  vue2, vue3
v-drag
The simplest way to integrate dragging on Vue.js
Stars: ✭ 71 (+12.7%)
Mutual labels:  vue2, vue3
hoc-element-table
📦 A Vue 3.x Table Component built on Webpack 5
Stars: ✭ 26 (-58.73%)
Mutual labels:  vue2, vue3
v-code-diff
A vue code diff display plugin, support Vue2 / Vue3
Stars: ✭ 93 (+47.62%)
Mutual labels:  code, vue3
v-intl
Add i18n to your awesome Vue 3 app 🔉
Stars: ✭ 13 (-79.37%)
Mutual labels:  vue2, vue3
Vue Konami Code
VueJS Konami code plugin
Stars: ✭ 26 (-58.73%)
Mutual labels:  code, vue2
vue-unstated
A tiny state management library for Vue Composition API.
Stars: ✭ 30 (-52.38%)
Mutual labels:  vue2, vue3
v-pip
🖼 Tiny vue wrapper for supporting native picture-in-picture mode.
Stars: ✭ 30 (-52.38%)
Mutual labels:  vue2, vue3
vue-insta-stories
Vue 2 & 3 library for Instagram like stories.
Stars: ✭ 45 (-28.57%)
Mutual labels:  vue2, vue3
vue-snippets
Visual Studio Code Syntax Highlighting For Vue3 And Vue2
Stars: ✭ 25 (-60.32%)
Mutual labels:  vue2, vue3
vue3-chat
2021👨‍🎓Vue2/3全家桶 + Koa+Socket+Vant3前后端分离移动端聊天应用。vue+node全栈入门项目
Stars: ✭ 46 (-26.98%)
Mutual labels:  vue2, vue3
g2plot-vue
g2plot for vue, both 2 and 3
Stars: ✭ 106 (+68.25%)
Mutual labels:  vue2, vue3
janak
Your next vue.js package!
Stars: ✭ 26 (-58.73%)
Mutual labels:  vue2, vue3
vue-split-carousel
a carousel component for vue, meanwhile display several carousel item
Stars: ✭ 37 (-41.27%)
Mutual labels:  vue2, vue3
vite-vue-admin
🎉🎉使用Vite + Vue3 + TypeScript + Element-plus + Mock开发的后台管理系统🎉🎉
Stars: ✭ 97 (+53.97%)
Mutual labels:  vue3

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

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

// OR

yarn add ofcold-vue-security-code

Usage

<!-- Html  -->
<input-code v-model="code"/>

VUE 2.0 And 3.0

// 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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].