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"} |
Events
event-name | desc | default |
---|---|---|
on-changed | emit the value when the value changed | |
on-finished | emit the value when the input finished |
Issue
If you find any issue , feel free post it at https://github.com/chuanjing/j-vue-password/issues.
License
MIT
Other
Starred the "j-vue-password", if it can help you.