Vue实现6位数密码效果

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

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

如下图：

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

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

解决方案：

重新设置 input样式问题

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;
}

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

<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>

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。