自定义交易密码输入框

```
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue自定义交易密码输入框</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
        ul,
        li,
        button {
            padding: 0;
            margin: 0;
            list-style: none
        }

.pwd_box {
            display: flex;
            display: -webkit-box;
            display: -webkit-flex;
        }

input[type=tel] {
            width: 0px;
            height: 0px;
            color: transparent;
            background: #000000;
            border: none;
            font-size: 18px;
            opacity: 0;
            z-index: -1;
        }

.psd-blink {
            display: inline-block;
        }

.pwd-wrap {
            width: 300px;
            height: 50px;
            padding-bottom: 1px;
            background: #fff;
            border: 1px solid #ddd;
            display: flex;
            display: -webkit-box;
            display: -webkit-flex;
            cursor: pointer;
            z-index: 10;

}

li {
            list-style-type: none;
            text-align: center;
            line-height: 50px;
            -webkit-box-flex: 1;
            flex: 1;
            -webkit-flex: 1;
            border-right: 1px solid #ddd;
            font-weight: bold;
        }

li:last-child {
            border-right: 0;
        }

i {
            height: 10px;
            width: 10px;
            border-radius: 50%;
            background: #000;
            display: inline-block;
        }

button {
            position: relative;
            display: block;
            height: 41px;
            text-align: center;
            padding: 0 20px;
            border-radius: 5px;
            font-size: 16px;
            border: 1px solid #dddddd;
            background: #dddddd;
            color: #000000;
            margin-left: 10px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="pwd_box" id="app">
        <input ref="pwd" type="tel" maxlength="6" v-model="msg" class="pwd" unselectable="on" />
        <ul class="pwd-wrap" @click="focus">
            <li :class="msg.length == 0?'psd-blink':''">
                <span v-if="visible">{{msg[0]}}</span>
                <i v-else-if="msg.length > 0"></i>
            </li>
            <li :class="msg.length == 1?'psd-blink':''">
                <span v-if="visible">{{msg[1]}}</span>
                <i v-else-if="msg.length > 1"></i>
            </li>
            <li :class="msg.length == 2?'psd-blink':''">
                <span v-if="visible">{{msg[2]}}</span>
                <i v-else-if="msg.length > 2"></i>
            </li>
            <li :class="msg.length == 3?'psd-blink':''">
                <span v-if="visible">{{msg[3]}}</span>
                <i v-else-if="msg.length > 3"></i>
            </li>
            <li :class="msg.length == 4?'psd-blink':''">
                <span v-if="visible">{{msg[4]}}</span>
                <i v-else-if="msg.length > 4"></i>
            </li>
            <li :class="msg.length == 5?'psd-blink':''">
                <span v-if="visible">{{msg[5]}}</span>
                <i v-else-if="msg.length > 5"></i>
            </li>
        </ul>
        <button @click="toggleVisible">点击切换显隐</button>
    </div>

watch: {
                msg(curVal) {
                    if (/[^\d]/g.test(curVal)) {
                        this.msg = this.msg.replace(/[^\d]/g, '');
                    }
                },
            },
            mounted() {
                this.focus()
            },
            methods: {
                //输入支付密码
                focus() {
                    this.$refs.pwd.focus();
                },
                toggleVisible() {
                    this.visible = !this.visible
                    this.focus()
                }

}
        })
    </script>
</body>

</html>
```

Leanote's Blog

Navigation

Recent Posts

Friend Links