Git Product home page Git Product logo

security-code's Introduction

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

security-code's People

Contributors

lilianjin avatar reslear avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

security-code's Issues

refactor: do plugin universal css agnostic

hi @lilianjin, i'm suggest do plugin css agnostic:

  • remove tailwind classes from plugin
  • add specific plugin classes like (sc-container, sc-wrapper, sc-input etc...)
  • add styles to .css for vanilla css (compiled with tailwind) and importing if need [1]
  • add to package.json separate exports for css files
  • add instruction how to use with tailwind and well-now classes with @apply syntax [2]
  • rewrite to typescript

[1]

// importing styles if need css 
import 'ofcold-security-code/styles.css'
.sc-container {
   display:flex;
   margin-left: auto;
   margin-right: auto;
}

[2]

.sc-container {
   @apply flex flex-direction ml-auto mr-auto
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.