Vue实现6位数密码效果


Posted in Javascript onAugust 18, 2018

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

如下图:

Vue实现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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
js调用AJAX时Get和post的乱码解决方法
Jun 04 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
Javascript中级语法快速入手
Jul 30 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
Node.js之readline模块的使用详解
Mar 25 Javascript
微信小程序嵌入腾讯视频源过程详解
Aug 08 Javascript
记录一次websocket封装的过程
Nov 23 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 #Javascript
详解Angular6 热加载配置方案
Aug 18 #Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 #Javascript
vue下history模式刷新后404错误解决方法
Aug 18 #Javascript
详解javascript appendChild()的完整功能
Aug 18 #Javascript
vue中的自定义分页插件组件的示例
Aug 18 #Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 #Javascript
You might like
PHP控制网页过期时间的代码
2008/09/28 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
Twig模板引擎用法入门教程
2016/01/20 PHP
php插入含有特殊符号数据的处理方法
2016/11/24 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
nodejs开发环境配置与使用
2014/11/17 NodeJs
实现无刷新联动例子汇总
2015/05/20 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
微信小程序 数组(增,删,改,查)等操作实例详解
2017/01/05 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
详解python实现识别手写MNIST数字集的程序
2018/08/03 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
如何基于windows实现python定时爬虫
2020/05/01 Python
python创建文本文件的简单方法
2020/08/30 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
北美个性化礼品商店:Things Remembered
2018/06/12 全球购物
积极分子思想汇报
2014/01/04 职场文书
运动会演讲稿100字
2014/08/25 职场文书
贷款承诺书
2015/01/20 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
2016年父亲节寄语
2015/12/04 职场文书
详解MySQL主从复制及读写分离
2021/05/07 MySQL
Python实现仓库管理系统
2022/05/30 Python