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関連のパスと変更方法

推薦する

Docker のポート解放失敗の解決策

今日、非常に奇妙な状況に遭遇しました。docker イメージを更新した後、docker-compos...

JSメモリ空間の詳細な説明

目次概要1. スタックとヒープ2. 変数オブジェクトと基本データ型3. 参照データ型とヒープメモリメ...

Vueのコンポーネントのprops属性について詳しく説明します

目次質問1: 小道具は具体的にどのように使用されますか?原理は何ですか?下を見る質問 2: 年齢に ...

Tomcat クラスローダーの実装方法とサンプルコード

Tomcat は内部的に複数の ClassLoader を定義し、アプリケーションとコンテナーが異な...

MySQL 5.7.25 圧縮版のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.25圧縮版のインストールと設定方法を参考までに紹介します。具体的な...

Firebug ツールを使用して iPad でページをデバッグする

iPad でページをデバッグするにはどうすればいいですか? iOS 5 をご利用の場合、iPad の...

Windows でのシンプルな Mysql バックアップ BAT スクリプトの共有

序文この記事では、Windows で Mysql をバックアップするための簡単な BAT スクリプト...

Vue+Element UIはドロップダウンメニューのカプセル化を実現します

この記事の例では、ドロップダウンメニューのカプセル化を実装するためのVue + Element UI...

CSS3アニメーションを使用した簡単な指クリックアニメーションの実装例

この記事では主に、CSS3 アニメーションで簡単な指クリックアニメーションを実装する例を紹介し、皆さ...

WebページのレイアウトではIE6の互換性の問題を考慮する必要があります

下の図は、当社のウェブサイト統計システムの訪問者詳細におけるブラウザ閲覧率を示しており、IE6 が ...

jQueryはフォントサイズ調整ケースを実装します

この記事では、フォントサイズを調整するためのjQueryの具体的なコードを参考までに紹介します。具体...

モバイルウェブページのサイズ調整を実装する方法

ようやく手元のプロジェクトが終了し、行方不明だった人たちが戻ってきました!プロジェクトを進める過程で...

MYSQLの文字セット設定方法(端末の文字セット)の詳しい説明

序文ターミナルを使用してデータベースまたはテーブルを作成するたびに、文字セットが latin1 であ...

CSS3 変換によって子要素の固定位置を絶対位置に変更する方法

この記事では、CSS3 の transform を使用して子要素の固定配置を絶対配置に変更する方法を...

ハイパーリンクの幅と高さを直接設定できない問題の解決策

幅と高さを直接使用することはできません。 display:block; または display:in...