如何用CSS寫出像美團(tuán)App那樣的短信驗(yàn)證碼輸入樣式

如何用CSS寫出像美團(tuán)App那樣的短信驗(yàn)證碼輸入樣式？

這樣的一個(gè)樣式很簡(jiǎn)單, 整體思路是首先在布局中要有一個(gè)真實(shí)的輸入框, 通過透明度隱藏掉。然后覆蓋層上開始寫自定義樣式, 通過動(dòng)畫布局模擬出你想要的輸入框樣式。

下圖為美團(tuán)App等短信驗(yàn)證碼布局

接下來使用 vue3 + typescript 實(shí)現(xiàn)該功能

<!-- 模版布局 -->
<template>
  <div class="input-diy">
    <p>美團(tuán)App驗(yàn)證碼輸入框DEMO</p>
    <div class="input-wrap">
      <input 
        maxlength="4" 
        type="number" 
        v-model="currentPwd"
        />
      <span 
        v-for="(val, index) in pwdList" 
        :key="index"
        :class="customClass(index)">
        {{ pwdArr[index] }}
        </span>
    </div>
  </div>
</template>

// 邏輯代碼
<script lang="ts">
import { 
  ref, 
  watch,
  reactive, 
  defineComponent, 
} from 'vue';
export default defineComponent({
  setup() { 
      let currentPwd=ref<string>(''), // 輸入的驗(yàn)證碼值
      pwdArr=reactive<string[]>([]), // 輸入框內(nèi)的值
      pwdLength=ref<number | null>(0),  // 已經(jīng)輸入的驗(yàn)證碼長度，默認(rèn)為0，顯示光標(biāo)
      pwdList=reactive<boolean[]>([false, false, false, false]); // 初始化驗(yàn)證碼數(shù)據(jù)
    
    watch(()=>{
      return currentPwd.value;
    }, (val)=>{
      watchCurrentPwd(val);
    })

    /**
     * 監(jiān)聽input驗(yàn)證碼改變
     */
    const watchCurrentPwd=(newVal: String)=> {
        let nval=newVal.toString().replace(/\s+/g,"");
        pwdLength.value=nval.length || 0; 
        pwdList.forEach((val: boolean, i: number)=> {
          pwdArr[i]=nval.slice(i, i + 1); // 獲取輸入inputvalue放入驗(yàn)證碼框
        });
        if(nval.length > 4) { // 截取四位數(shù)據(jù)
          currentPwd.value=nval.slice(0, 4);
        } else if( nval.length===4 ) {
          pwdLength.value=null; // 輸完驗(yàn)證碼 取消光標(biāo)
        }
    } 

    /**
     * 自定義類名
     */
    const customClass=(index: Number)=> {
      return  index===pwdLength.value ? 'active' : '';
    }
    return {
      pwdArr,
      pwdList,
      pwdLength,
      currentPwd,
      customClass
    }
  }
});
</script>

/* CSS 樣式 */
<style  scope>
  .input-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 25px;
    overflow: hidden;
  }

  /* 真實(shí)輸入框 */
  .input-wrap input {
    opacity: 0;
    color: transparent;
    position: absolute;
    top: 0;
    left: -50%;
    /*bottom: 0;*/
    width: 750px;
    height: 150%;
    z-index: 2;
    text-align: left;
  }

  /* 模擬驗(yàn)證碼輸入框 */
  .input-wrap span {
    width: 60px;
    height: 60px;
    border-bottom: 2px solid #BDC2CC;
    margin-right: 25px;
    position: relative;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 60px;
    font-size: 28px;
    color: #303747;

  }

  .input-wrap span:last-child {
    margin-right: 0;
  }

  /*模擬光標(biāo)底部*/
  .input-wrap .active {
    border-bottom: 2px solid #22242A;
  }

  /*模擬光標(biāo)閃爍*/
  .input-wrap .active:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 30px;
    display: block;
    width: 2px;
    height: 30px;
    background-color: #22242A;
    transform: translate(-50%, -50%);
    animation: focus 1s infinite;
  }

  .input-wrap-diy{
    position: relative;
  }

  /* 光標(biāo)動(dòng)畫 */
  @keyframes focus {
    0% {
      opacity: 1
    }
    50% {
      opacity: 1
    }
    51% {
      opacity: 0
    }
    99% {
      opacity: 0
    }
  }
</style>

你學(xué)廢了么? 如果想了解更多的web小程序開發(fā)知識(shí), 請(qǐng)點(diǎn)贊收藏加關(guān)注啊。手?jǐn)]不易！持續(xù)更新...

DEMO效果圖

先，看一下要實(shí)現(xiàn)的效果，效果視頻如下：

分析

1.按鈕點(diǎn)擊之后，會(huì)把按鈕禁用

2.同時(shí)按鈕里面的內(nèi)容也會(huì)變化，注意button里面的內(nèi)容通過innerHTML修改

3.里面的秒數(shù)是有變化的，因此需要一個(gè)定時(shí)器

4.定義一個(gè)變量，在定時(shí)器里面，不斷遞減

5.如果變量為0說明到時(shí)間了，我們需要停止定時(shí)器，并且復(fù)原按鈕的初始狀態(tài)

代碼

天在小破站看到一個(gè)前端生成隨機(jī)驗(yàn)證碼的視頻，感覺很有意思，就跟著操作了一下，成功了。

后來自己又想給它加一個(gè)提交按鈕，輸入并判斷驗(yàn)證碼的正確性，也可以正常運(yùn)行，但是我的代碼好像還是存在一些bug：

1.canvas標(biāo)簽是繪圖容器，自帶屬性使它是一個(gè)默認(rèn)300*150的容器，縮小canvs容器時(shí)，里面的繪圖也會(huì)變小，我沒有找到合適的方法去調(diào)整它的大小。

2.對(duì)于輸入框input，我使用了float浮動(dòng)，為了使input輸入框和canvas里面的驗(yàn)證碼并排，但是被vscode警告了。

這次的實(shí)戰(zhàn)練習(xí)也經(jīng)歷了很多坎坷，但是也收獲很大。學(xué)習(xí)到了canvas標(biāo)簽的用法、JS全局變量和局部變量、以及有關(guān)context的一些屬性和方法。

最后，希望路過的大佬，幫我看看bug，幫幫菜鳥。

附上源碼

在線咨詢

上一篇：精美時(shí)間線時(shí)間軸模板素材，圖文實(shí)例詳解時(shí)間線繪制
下一篇：從零搭建react-native開發(fā)環(huán)境-避坑指南

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

如何用CSS寫出像美團(tuán)App那樣的短信驗(yàn)證碼輸入樣式

先，看一下要實(shí)現(xiàn)的效果，效果視頻如下：

分析

代碼

您的項(xiàng)目需求

先，看一下要實(shí)現(xiàn)的效果，效果視頻如下：