Vue 实现6位数密码（iOS WebView卡顿优化）

在ios系统，原生 webview 嵌套H5页面使用时，编写完成的6位数输入密码，输入密码卡顿问题的解决方案：

如下图：

原因是因为，CSS 这块 造成的。简单来说，style left 为负数的时候出现的，android 目测不会出现此问题

代码语言：javascript复制

input[type=tel] {
    opacity: 0;
    z-index: -1;
    position: absolute;
    left:-100%;
}

解决方案：

---

重新设置 input样式问题

代码语言：javascript复制

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

——————— 全部代码在这，你可以拿出去使用即可 ———————-

代码语言：javascript复制

<template>
    <div id="payPwd">
        <header>支付密码设置</header>
        <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':''"><i v-if="msg.length > 0"></i></li>
            <li :class="msg.length == 1?'psd-blink':''"><i v-if="msg.length > 1"></i></li>
            <li :class="msg.length == 2?'psd-blink':''"><i v-if="msg.length > 2"></i></li>
            <li :class="msg.length == 3?'psd-blink':''"><i v-if="msg.length > 3"></i></li>
            <li :class="msg.length == 4?'psd-blink':''"><i v-if="msg.length > 4"></i></li>
            <li :class="msg.length == 5?'psd-blink':''"><i v-if="msg.length > 5"></i></li>
        </ul>
        <button type="button" @click="sendCode">获取验证码 lodding</button>
    </div>
</template>
<script>
    import api from "./api";
    import "@/js/utils"; //公共方法
    export default {
        components: {},
        data() {
            return {
                msg: '',
            }
        },
        created() {},
        computed: {},
        watch: {
            msg(curVal) {
                if(/[^d]/g.test(curVal)) {
                    this.msg = this.msg.replace(/[^d]/g, '');
                }
            },
        },
        methods: {
            focus() {
                this.$refs.pwd.focus();
            },
            sendCode() {
                //时间
                utils.sendCode(event.target);

                //showLoading
                utils.view.showLoading();

                setTimeout(function() {
                    utils.view.dismissLoading();
                }, 5000);
            }
        },
        mounted() {}
    }
</script>
<style lang="less" scoped>
    #payPwd {
        height: auto;
        header {
            text-align: center;
            height: 80px;
            line-height: 90px;
            text-align: center;
        }
        input[type=tel] {
            width: 0.1px;
            height: 0.1px;
            color: transparent;
            position: relative;
            top: 23px;
            background: #000000;
            left: 46px;
            border: none;
            font-size: 18px;
            opacity: 0;
            z-index: -1;
        }
        //光标
        .psd-blink {
            display: inline-block;
            background: url("./img/blink.gif") no-repeat center;
        }
        .pwd-wrap {
            width: 90%;
            height: 50px;
            padding-bottom: 1px;
            margin: 0 auto;
            background: #fff;
            border: 1px solid #ddd;
            display: flex;
            display: -webkit-box;
            display: -webkit-flex;
            cursor: pointer;
            position: absolute;
            left: 0;
            right: 0;
            top: 13%;
            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;
                &: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;
            margin: 0 auto;
            margin-top: 70%;
            padding: 0 20px;
            border-radius: 5px;
            font-size: 16px;
            border: 1px solid #dddddd;
            background: #dddddd;
            color: #000000;
        }
    }
</style>

附加：如果不想使用光标，直接

代码语言：javascript复制

//去掉 :class="msg.length == 0?'psd-blink':''" 即可
<li><i v-if="msg.length > 0"></i></li>

---

gitHub：在这里

ios android webview github input

0 人点赞