J-vue-password NPM

j-vue-password

The vue password(identifying code) component for H5.

Github

https://github.com/chuanjing/j-vue-password;

NPM

https://www.npmjs.com/package/j-vue-password;

Default style

Custom style

Installation

npm i j-vue-password
# or
cnpm i j-vue-password

Example

<template>
	<div style="padding: 50px 0;">
    <Password
      default-color="blue"
      active-color="red"
      border-radius="10px"
      :item-style="{ background: '#eee', width: '60px' }"
      :length="6"
      :auto-focus="true"
      :auto-blur="false"
      v-model="passwordVal" 
      @on-finished="onFinished"
      @on-changed="onchanged"/>
      <div style="padding: 50px;">
        <div>
          passwordVal: {{passwordVal}}
        </div>
        <div>
          onchanged: {{changedVal}}
        </div>
        <div>
          onFinished: {{finishedVal}}
        </div>
      </div>
  </div>
</template>

<script>
import Password from "j-vue-password"
export default {
	components: {
		Password: Password
  },
  data() {
    return {
      passwordVal: undefined,
      changedVal: undefined,
      finishedVal: undefined
    }
  },
  methods: {
    onFinished(val) {
      this.finishedVal = val
    },
    onchanged(val) {
      this.changedVal = val
    }
  },
}
</script>

Props

props-name	type	desc	default
length	Number	the length of the password	6
auto-focus	Boolean	focus when component mounted	true
auto-blur	Boolean	blur when finished the input	false
v-model	Number	bind the value like input element
default-color	String	the border & circle color when invalid	"#ddd"
active-color	String	the border & circle color when active	"#BEA473"
border-radius	String	border-radius	"2px"
item-style	Object	the style of input box	{width: "50px",height:"50px", background: "#fff"}