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

下圖為美團App等短信驗證碼布局

接下來使用 vue3 + typescript 實現該功能

<!-- 模版布局 -->
<template>
  <div class="input-diy">
    <p>美團App驗證碼輸入框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>(''), // 輸入的驗證碼值
      pwdArr=reactive<string[]>([]), // 輸入框內的值
      pwdLength=ref<number | null>(0),  // 已經輸入的驗證碼長度，默認為0，顯示光標
      pwdList=reactive<boolean[]>([false, false, false, false]); // 初始化驗證碼數據
    
    watch(()=>{
      return currentPwd.value;
    }, (val)=>{
      watchCurrentPwd(val);
    })

    /**
     * 監聽input驗證碼改變
     */
    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放入驗證碼框
        });
        if(nval.length > 4) { // 截取四位數據
          currentPwd.value=nval.slice(0, 4);
        } else if( nval.length===4 ) {
          pwdLength.value=null; // 輸完驗證碼 取消光標
        }
    } 

    /**
     * 自定義類名
     */
    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;
  }

  /* 真實輸入框 */
  .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;
  }

  /* 模擬驗證碼輸入框 */
  .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;
  }

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

  /*模擬光標閃爍*/
  .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;
  }

  /* 光標動畫 */
  @keyframes focus {
    0% {
      opacity: 1
    }
    50% {
      opacity: 1
    }
    51% {
      opacity: 0
    }
    99% {
      opacity: 0
    }
  }
</style>

你學廢了么? 如果想了解更多的web小程序開發知識, 請點贊收藏加關注啊。手擼不易！持續更新...