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 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
ajax读取数据后使用jqchart显示图表的方法
Jun 10 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
Javascript中字符串相关常用的使用方法总结
Mar 13 Javascript
js模拟百度模糊搜索的实例
Aug 04 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面向对象之工作单元(实例讲解)
2017/06/26 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
struts2 jquery 打造无限层次的树
2009/10/23 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
JavaScript中Array的实用操作技巧分享
2016/09/11 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
2018/08/27 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
2018/09/30 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
寻找网站后台地址的python脚本
2014/09/01 Python
解决Atom安装Hydrogen无法运行python3的问题
2019/08/28 Python
python3多线程知识点总结
2019/09/26 Python
浅析Python 多行匹配模式
2020/07/24 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
亚洲最大旅游体验平台:KKday
2017/10/21 全球购物
策划助理岗位职责
2013/11/18 职场文书
会计实习生自我鉴定
2013/12/12 职场文书
集团公司人力资源部岗位职责
2014/01/03 职场文书
安全责任书范文
2014/03/12 职场文书
青年志愿者先进事迹
2014/05/06 职场文书
公司募捐倡议书
2014/05/14 职场文书
服务承诺书范文
2014/05/19 职场文书
学校花圃的标语
2014/06/18 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
讲解Python实例练习逆序输出字符串
2022/05/06 Python
Redis Lua脚本实现ip限流示例
2022/07/15 Redis