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 相关文章推荐
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
整理一些JavaScript的IE和火狐的兼容性注意事项
Mar 17 Javascript
深入理解javascript学习笔记(一) 编写高质量代码
Aug 09 Javascript
JS操作iframe里的dom(实例讲解)
Jan 29 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
解决jQuery动态获取手机屏幕高和宽的问题
May 07 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
js 提取某()特殊字符串长度的实例
Dec 06 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 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详解ASCII码对照表与字符转换
2011/12/05 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
修改Laravel5.3中的路由文件与路径
2016/08/10 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
2016/05/27 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
2016/09/17 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
vue组件间通信解析
2017/03/01 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
js实现无缝轮播图插件封装
2020/07/31 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
使用python实现扫描端口示例
2014/03/29 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
python列表的逆序遍历实现
2020/04/20 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
文明青少年标兵事迹材料
2014/01/28 职场文书
元旦促销方案
2014/03/15 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
《扇形统计图》教学反思
2016/02/17 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
mysql中数据库覆盖导入的几种方式总结
2022/03/25 MySQL