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自定义事件的简单实现代码
Jan 27 Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
微信小程序 地图map详解及简单实例
Jan 10 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
微信小程序实现页面跳转传值的方法
Oct 12 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
Aug 26 Javascript
JS常见内存泄漏及解决方案解析
May 30 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 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
第三节 定义一个类 [3]
2006/10/09 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
ThinkPHP中RBAC类的四种用法分析
2014/11/24 PHP
js自带函数备忘 数组
2006/12/29 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
jquery实现焦点图片随机切换效果的方法
2015/03/12 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
使用python开发vim插件及心得分享
2014/11/04 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
Python3多线程版TCP端口扫描器
2019/08/31 Python
python GUI库图形界面开发之PyQt5复选框控件QCheckBox详细使用方法与实例
2020/02/28 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
Anaconda使用IDLE的实现示例
2020/09/23 Python
Python 图片处理库exifread详解
2021/02/25 Python
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
护理专业学生的求职信范文
2013/12/11 职场文书
业务部主管岗位职责
2014/01/29 职场文书
优秀班集体获奖感言
2014/02/03 职场文书
2014年党务公开实施方案
2014/02/27 职场文书
小学生放飞梦想演讲稿
2014/08/26 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
python双向链表实例详解
2022/05/25 Python