Vue实现6位数密码效果
59 浏览量
2020-12-11
23:59:36
上传
评论
收藏 40KB PDF 举报
Vue实现实现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: {},
资源评论
