最近、同社は、下図に示すように、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: HTML テーブル タグ チュートリアル (36): テーブル ヘッダーの背景色属性 BGCOLOR
序文データベース トランザクションに関して言えば、トランザクションの ACID 特性、分離レベル、解...
問題の説明html <iframe id="h5Content" src=...
目次1. Windows システムでの Nginx のインストールと起動プロセス: 2. 起動時にN...
この記事では、Webページの画像の回転を実現するためのjsの具体的なコードを参考までに共有します。具...
序文日常の開発では、テキストの水平スクロール効果(一般にカルーセルと呼ばれる)によく遭遇します。これ...
カスタムパラメータを渡すだけhtml <div id="アプリ"> ...
脆弱性の詳細VSFTP は、GPL に基づいてリリースされた Unix ライクなシステムで使用される...
MySQLダウンロードアドレス: https://obs.cn-north-4.myhuaweicl...
目次1. 一般的な高階関数1.1、フィルター1.2、地図1.3、減らすHigher Order fu...
結合指数は複合指数とも呼ばれます。複合インデックスの場合: MySQL はインデックス内のフィールド...
1. まず公式ウェブサイトにアクセスしてMySQLインストールパッケージをダウンロードします参考: ...
テキストファイルの内容を並べ替える使用方法: ソート + オプション + ファイル名 (複数のファイ...
MySQL 5.7 を新しくインストールしました。ログインすると、パスワードが間違っているというメッ...
コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...
目次1. Angular 2 アプリケーションのライフサイクル フックとは何ですか? 2. Angu...