最近、同社は、下図に示すように、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
今日、非常に奇妙な状況に遭遇しました。docker イメージを更新した後、docker-compos...
目次概要1. スタックとヒープ2. 変数オブジェクトと基本データ型3. 参照データ型とヒープメモリメ...
目次質問1: 小道具は具体的にどのように使用されますか?原理は何ですか?下を見る質問 2: 年齢に ...
Tomcat は内部的に複数の ClassLoader を定義し、アプリケーションとコンテナーが異な...
この記事では、MySQL 5.7.25圧縮版のインストールと設定方法を参考までに紹介します。具体的な...
iPad でページをデバッグするにはどうすればいいですか? iOS 5 をご利用の場合、iPad の...
序文この記事では、Windows で Mysql をバックアップするための簡単な BAT スクリプト...
この記事の例では、ドロップダウンメニューのカプセル化を実装するためのVue + Element UI...
この記事では主に、CSS3 アニメーションで簡単な指クリックアニメーションを実装する例を紹介し、皆さ...
下の図は、当社のウェブサイト統計システムの訪問者詳細におけるブラウザ閲覧率を示しており、IE6 が ...
この記事では、フォントサイズを調整するためのjQueryの具体的なコードを参考までに紹介します。具体...
ようやく手元のプロジェクトが終了し、行方不明だった人たちが戻ってきました!プロジェクトを進める過程で...
序文ターミナルを使用してデータベースまたはテーブルを作成するたびに、文字セットが latin1 であ...
この記事では、CSS3 の transform を使用して子要素の固定配置を絶対配置に変更する方法を...
幅と高さを直接使用することはできません。 display:block; または display:in...