Vue はモバイル端末にマルチグリッド入力ボックスを実装

<div class="verify-tel">
    <h1>SMS認証</h1>
    <h2>SMS認証</h2>
    <div>
        <input ref="pwd" :maxlength="digits.length" v-model="msg" style="position: absolute;z-index: -1;opacity: 0"/>
        <ul class="pwd-wrap" @click="focus">
            <li v-for="(item,key) 数字" :style="{'margin-right': (100-10*digits.length)/(digits.length-1)+'%','width':'10%'}" >
                <span v-if="msgLength > key">{{msg.substring(key,key+1)}}</span>
            </li>
        </ul>
    </div> 
</div>

html,本文{
    幅: 100%;
    高さ: 100%;
    背景: #fbf9fe;
  }
  .verify-tel{
    背景色: #f9f9f9;   
    マージン: 0 30px;
    >p{
      色: 赤;
      フォントの太さ: 太字;
      上マージン: 40px;
      下部マージン: 30px;
    }
    >h1{
      フォントの太さ: 400;
      下マージン: 0;
    }
    >h2{
      上マージン: 0;
      フォントの太さ: 400;
      フォントサイズ: 14px;
      色: #858585;
    }
    .入力ボックス{
      上マージン: 30px;
      >入力{
        幅: 10%;
        境界線: なし;
        border-bottom: 1px のソリッドグレー;
        背景色: #f9f9f9;
        テキスト配置: 中央;
        右マージン: 18%;
        フォントサイズ: 35px;
        ＆：集中{
          border-bottom: 1px solid deepskyblue;
        }
        &:最後のタイプ{
          右マージン: 0 !重要;
        }
      }
    }
    .btn-ボックス{
      >ボタン{
        高さ: 40px;
        境界線: 1px 実線 #4e8cee;
        色: #4e8cee;
        背景色: 白;
        境界線の半径: 4px;
        幅: 30%;
        &:最後のタイプ{
          フロート: 右;
          幅: 65%;
          高さ: 40px;
          色: 白;
          背景色: rgb(78,140,​​238);
          境界線の半径: 4px;
        }
      }
    }
  }
  .pwd-wrap{
    左パディング: 0;
    幅: 100%;
    高さ: 44px;
    パディング下部: 1px;
    マージン: 0 自動;
    ディスプレイ: フレックス;
    ディスプレイ: -webkit-box;
    ディスプレイ: -webkit-flex;
    カーソル: ポインタ;
    境界線: なし;
    背景色: #f9f9f9;
  }
  .pwd-wrap li{
    リストスタイルタイプ:なし;
    テキスト配置: 中央;
    行の高さ: 44px;
    -webkit-box-flex: 1;
    フレックス: 1;
    -webkit-flex: 1;
    境界線: なし;
    border-bottom:1px 黒一色;
    背景色: #f9f9f9;
    &:最後のタイプ{
      右マージン: 0 !重要;
    }
    >スパン{
      フォントサイズ: 20px;
    }
  }
  .pwd-wrap li:最後の子{
    右境界線: 0;
  }
  .pwd-wrap li i{
    高さ: 10px;
    幅: 10px;
    境界線の半径:50%;
    背景: #000;
    表示: インラインブロック;
  }

<スクリプト>
  エクスポートデフォルト{
    データ（）{
      戻る {
        page:0, //1 は SMS 認証用です digits:['','','','','','',''], //入力ボックスの数字制御、ここで設定できる「入力ボックス」の数
        メッセージ:''、
        メッセージの長さ:0,
      }
    },
    方法:{
      //携帯電話番号検証インターフェース関数 verifyTels:async function () {
        試す{
        }キャッチ(e){
          コンソール.log(e)
        }
      },
      //入力ボックスにフォーカスを当てる focus(){
        this.$refs.pwd.focus(); 
      },
    },
    beforeMount:関数() {
        //ビジネス ニーズにより複数のページが必要となり、数字は親コンポーネントから送信されるため、これを非表示にして、コードは 1 行のみ残します。
        このページは1ページ目です。
    },
    時計：
      メッセージ(curVal){
        //入力長を監視します。入力が完了したら、検証インターフェース関数を自動的に呼び出します。if(curVal.trim().length===this.digits.length){
           this.verifyTels(); 
        }
        this.msgLength = curVal.length;
      },
      'ページ'：{
        ハンドラ:関数 (新しい値、古い値) {
          if(古い値==0&&新しい値==1){
            // 初めてページに入るときに、フォーカスが自動的に取得されます。これは最適化できます。
            this.timer = setTimeout(()=>{this.$refs.pwd.focus()},500);
          }
        },
        深い:本当
      }
    },
    beforeDestroy:関数() {
      タイムアウトをクリアします(this.timer);
    }
  }
</スクリプト>