vue项目写密码框组件 仿京东（pc）

百度搜索好多有关pc端输入密码框的组件，没有找到心仪的，所以决定自己封装一个类似京东输入密码框的组件。

templete

<template>
    <div class='am-payPwd' :id="`ids_${id}`">
        <input type="password"
               readonly
               onfocus="this.removeAttribute('readonly');"
               maxlength="1"
               autocomplete="new-password"
               @input="changeInput"
               @click="changePwd"
               v-model="pwdList[i]"
               @keyup="keyUp($event)"
               @keydown="oldPwdList = pwdList.length"
               class="shortInput"
               v-for="(v, i) in 6" :key="i">
    </div>
</template>

script

<script>
    export default {
        data () {
            return {
                pwdList: [],
                oldPwdList: [],
                isDelete: false,
                ipt: ''
            }
        },
        props: {
            id: String, // 当一个页面有多个密码输入框时，用id来区分
            default: '1'
        },
        mounted () {
            this.ipt = document.querySelectorAll(`#ids_${this.id} .shortInput`)
        },
        methods:{
            keyUp (ev) {
                let index = this.pwdList.length
                if (!index) return
                if (ev.keyCode === 8) {
                    this.isDelete = true
                    if (this.oldPwdList === this.pwdList.length) {
                        if (index === this.pwdList.length) {
                            this.pwdList.pop()
                        }
                        index--
                    } else {
                        index > 0 && index--
                    }
                    this.ipt[index].focus()
                } else if (this.isDelete && index === this.pwdList.length && /^\d$/.test(ev.key)) {
                    this.isDelete = false
                    this.pwdList.pop()
                    this.pwdList.push(ev.key)
                    this.ipt[this.pwdList.length] && this.ipt[this.pwdList.length].focus()
                }
                this.$emit('getPwd', this.pwdList.join(''))
            },
            changePwd () {
                let index = this.pwdList.length
                index === 6 && index--
                this.ipt[index].focus()
            },
            changeInput () {
                let index = this.pwdList.length
                let val = this.pwdList[index - 1]
                if (!/[0-9]/.test(val)) {
                    this.pwdList.pop()
                    return
                }
                if (!val) {
                    this.pwdList.pop()
                    index--
                    if (index > 0) this.ipt[index - 1].focus()
                } else {
                    if (index < 6) this.ipt[index].focus()
                }
            }
        }
    }
</script>

style

<style lang="less" rel="stylesheet/less">
    .am-payPwd {
        display: inline-block;
        border-radius: 5px;
        padding: 10px 0;
        border: 1px solid #cccccc;
        position: relative;
        margin-left: 1px;
        .shortInput {
            text-align: center;
            font-size: 30px;
            float: left;
            width: 40px;
            height: 20px !important;
            color: #333;
            outline: #ff0067;
            border-right: 1px solid #eee;
            &:last-child{
                border-right:0;
             }
        }
    }
</style>

这个组件不需要安装任何插件 是自己封装的一个 拿过去直接用就可以了

页面调用

1.引入组件

import paycodeApp from  '@/components/paycodeApp.vue'

2.组件注册

components:{
  paycodeApp
},

3.页面使用

<paycode-app></paycode-app>

附上效果图

以上就是封装的代码和如何使用的代码，如有什么问题欢迎留言。