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 相关文章推荐
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 Javascript
Javascript仿PHP $_GET获取URL中的参数
May 12 Javascript
jquery实现html页面 div 假分页有原理有代码
Sep 06 Javascript
理解javascript闭包
Dec 15 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 Javascript
Bootstrap实现可折叠分组侧边导航菜单
Mar 07 Javascript
layui表格checkbox选择全选样式及功能的实例
Mar 07 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 Javascript
js实现文字头像的生成代码
Mar 07 Javascript
如何基于viewport vm适配移动端页面
Nov 13 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多维数组遍历方法(2种实现方法)
2015/12/10 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
JS编程小常识很有用
2012/11/26 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
Vue路由跳转问题记录详解
2017/06/15 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
优化Vue项目编译文件大小的方法步骤
2019/05/27 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python 数据结构之旋转链表
2017/02/25 Python
python抖音表白程序源代码
2019/04/07 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
三好学生演讲稿范文
2014/04/26 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
升国旗演讲稿
2014/09/05 职场文书
甜品店创业计划书
2014/09/21 职场文书
出售房屋协议书范本
2014/10/06 职场文书
2015年教师节慰问信
2015/03/23 职场文书
2015年计划生育责任书
2015/05/08 职场文书
2015年环保局工作总结
2015/05/22 职场文书
2016教师节感恩话语
2015/12/09 职场文书
委托书范本格式
2019/04/18 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang