欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實現(xiàn)6位數(shù)密碼效果

 更新時間:2018年08月18日 16:20:53   作者:Rkatsiteli  
這篇文章主要為大家詳細介紹了Vue實現(xiàn)6位數(shù)密碼,優(yōu)化iOS WebView卡頓,具有一定的參考價值,感興趣的小伙伴們可以參考一下

在ios系統(tǒng),原生 webview 嵌套H5頁面使用時,編寫完成的6位數(shù)輸入密碼,輸入密碼卡頓問題的解決方案:

如下圖:

原因是因為,CSS 這塊 造成的。簡單來說,style left 為負數(shù)的時候出現(xiàn)的,android 目測不會出現(xiàn)此問題

input[type=tel] {
 opacity: 0;
 z-index: -1;
 position: absolute;
 left:-100%;
}

解決方案:

重新設(shè)置 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>支付密碼設(shè)置</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;
  }
  //光標(biāo)
  .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>

附加:如果不想使用光標(biāo),直接

//去掉 :class="msg.length == 0?'psd-blink':''" 即可
<li><i v-if="msg.length > 0"></i></li>

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue 封裝自定義組件之tabal列表編輯單元格組件實例代碼

    vue 封裝自定義組件之tabal列表編輯單元格組件實例代碼

    這篇文章主要介紹了vue 封裝自定義組件tabal列表編輯單元格組件實例代碼,需要的朋友可以參考下
    2017-09-09
  • vue實現(xiàn)配置全局訪問路徑頭(axios)

    vue實現(xiàn)配置全局訪問路徑頭(axios)

    今天小編就為大家分享一篇vue實現(xiàn)配置全局訪問路徑頭(axios),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • 解決vue 使用setTimeout,離開當(dāng)前路由setTimeout未銷毀的問題

    解決vue 使用setTimeout,離開當(dāng)前路由setTimeout未銷毀的問題

    這篇文章主要介紹了解決vue 使用setTimeout,離開當(dāng)前路由setTimeout未銷毀的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • 在Vue中使用CSS3實現(xiàn)內(nèi)容無縫滾動的示例代碼

    在Vue中使用CSS3實現(xiàn)內(nèi)容無縫滾動的示例代碼

    這篇文章主要介紹了在Vue中使用CSS3實現(xiàn)內(nèi)容無縫滾動的示例代碼,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-11-11
  • Vue中點擊active并第一個默認選中功能的實現(xiàn)

    Vue中點擊active并第一個默認選中功能的實現(xiàn)

    這篇文章主要介紹了Vue中點擊active并第一個默認選中功能的實現(xiàn)代碼,代碼簡單易懂,非常不錯具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-02-02
  • vue3.0手動封裝分頁組件的方法

    vue3.0手動封裝分頁組件的方法

    這篇文章主要為大家詳細介紹了vue3.0手動封裝分頁組件的方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • vue3實現(xiàn)國際化的過程與遇到的問題詳解

    vue3實現(xiàn)國際化的過程與遇到的問題詳解

    像很多大型的網(wǎng)址,特別是跨國際等公司網(wǎng)頁,訪問來自世界各地用戶,所以網(wǎng)頁的國際化極其重要的需求,這篇文章主要給大家介紹了關(guān)于vue3實現(xiàn)國際化的過程與遇到的問題的相關(guān)資料,需要的朋友可以參考下
    2022-05-05
  • Vue自定義指令詳解

    Vue自定義指令詳解

    這篇文章主要為大家介紹了Vue自定義指令,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-11-11
  • Vue實現(xiàn)開始時間和結(jié)束時間范圍查詢

    Vue實現(xiàn)開始時間和結(jié)束時間范圍查詢

    這篇文章主要為大家詳細介紹了Vue實現(xiàn)開始時間和結(jié)束時間的范圍查詢,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-08-08
  • vue中使用elementUI組件手動上傳圖片功能

    vue中使用elementUI組件手動上傳圖片功能

    Vue是一套構(gòu)建用戶界面的框架, 開發(fā)只需要關(guān)注視圖層, 它不僅易于上手,還便于與第三方庫或既有項目的整合。這篇文章主要介紹了vue中使用elementUI組件手動上傳圖片,需要的朋友可以參考下
    2019-12-12

最新評論