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

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

最近、同社は、下図に示すように、h5 ページ操作を完了するという要件を提示しました。

ネットで入手できるホイールがあまりなかったので、自分で作りました。では、これ以上長々とせずに、すぐにコードを見てみましょう。

<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>

CSS部分(スタイル内容が複雑すぎるため、変更はスキップしてください)

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;
    表示: インラインブロック;
  }

jsコードの一部

<スクリプト>
  エクスポートデフォルト{
    データ(){
      戻る {
        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);
    }
  }
</スクリプト>

ご不明な点がございましたら、ご連絡の上修正をお願いいたします。誰でも便利に使える

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue プロジェクトのモバイル側で IP 入力ボックスを実装する際の問題
  • Vue2.0はモバイル入力ボックスのリアルタイム検索と更新リスト機能を実装します

<<:  HTML テーブル タグ チュートリアル (36): テーブル ヘッダーの背景色属性 BGCOLOR

>>:  Ubuntu環境でのPHP関連のパスと変更方法

推薦する

MySQLにおけるトランザクション分離レベルの実装原理の詳細な説明

序文データベース トランザクションに関して言えば、トランザクションの ACID 特性、分離レベル、解...

Windows で nginx を素早くインストールし、自動的に起動するように設定する

目次1. Windows システムでの Nginx のインストールと起動プロセス: 2. 起動時にN...

ウェブページの画像の回転を実現するjs

この記事では、Webページの画像の回転を実現するためのjsの具体的なコードを参考までに共有します。具...

回転灯効果を実現するWeChatアプレットの例

序文日常の開発では、テキストの水平スクロール効果(一般にカルーセルと呼ばれる)によく遭遇します。これ...

vsFTP 3.0.3 のコンパイルとインストールの詳細な分析

脆弱性の詳細VSFTP は、GPL に基づいてリリースされた Unix ライクなシステムで使用される...

ARM64アーキテクチャでmysql5.7.22をインストールするプロセス全体

MySQLダウンロードアドレス: https://obs.cn-north-4.myhuaweicl...

Javascript 共通高階関数の詳細

目次1. 一般的な高階関数1.1、フィルター1.2、地図1.3、減らすHigher Order fu...

MySQL ジョイントインデックスの使用ルール

結合指数は複合指数とも呼ばれます。複合インデックスの場合: MySQL はインデックス内のフィールド...

win10にmysql 8.0.18-winx64をインストールする詳細な手順

1. まず公式ウェブサイトにアクセスしてMySQLインストールパッケージをダウンロードします参考: ...

Linuxのテキスト処理コマンドsortの詳細な説明

テキストファイルの内容を並べ替える使用方法: ソート + オプション + ファイル名 (複数のファイ...

MySQL 5.7 でパスワードを変更するときに発生する ERROR 1054 (42S22) の解決方法

MySQL 5.7 を新しくインストールしました。ログインすると、パスワードが間違っているというメッ...

ネストされた HTML ページの使用例 (フレームセットの使用)

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

Angular の 12 の典型的な問題について簡単に説明します

目次1. Angular 2 アプリケーションのライフサイクル フックとは何ですか? 2. Angu...