Vue を使用して数値キーボード コンポーネントを実装する方法

私は最近 Vue 開発を行っています。金額入力を伴うページが多いため、製品では金額入力にネイティブ入力を使用するエクスペリエンスが非常に悪いと常に感じているため、Vue を使用してカスタム数値キーボード コンポーネントを作成しました。実装コード こちらの記事を参考にしてください

ユーザーエクスペリエンスを満足させるために、vueを使用してカスタムテンキーコンポーネントを作成しましたが、ユーザーエクスペリエンスは悪くありません。

早速、レンダリングから始めましょう~

レンダリング

具体的な実装

レイアウトと組版

<p class=&#39;key-container&#39;>
  <p class=&#39;key-title&#39;>请输入金额</p>
  <p class=&#39;input-box&#39;>{{ money }}</p>
  <p class=&#39;keyboard&#39; @click.stop=&#39;_handleKeyPress&#39;>
    <p class=&#39;key-row&#39;>
      <p class=&#39;key-cell&#39; data-num=&#39;7&#39;>7</p>
      <p class=&#39;key-cell&#39; data-num=&#39;8&#39;>8</p>
      <p class=&#39;key-cell&#39; data-num=&#39;9&#39;>9</p>
      <p class=&#39;key-cell&#39; data-num=&#39;D&#39;>C</p>
    </p>
    <p class=&#39;key-row&#39;>
      <p class=&#39;key-cell&#39; data-num=&#39;4&#39;>4</p>
      <p class=&#39;key-cell&#39; data-num=&#39;5&#39;>5</p>
      <p class=&#39;key-cell&#39; data-num=&#39;6&#39;>6</p>
      <p class=&#39;key-cell&#39; data-num=&#39;C&#39;>清空</p>
    </p>
    <p class=&#39;key-row&#39;>
      <p class=&#39;key-cell&#39; data-num=&#39;1&#39;>1</p>
      <p class=&#39;key-cell&#39; data-num=&#39;2&#39;>2</p>
      <p class=&#39;key-cell&#39; data-num=&#39;3&#39;>3</p>
      <p class=&#39;key-cell&#39; data-num=&#39;-1&#39;></p>
    </p>
    <p class=&#39;key-row&#39;>
      <p class=&#39;key-cell disabled&#39; data-num=&#39;-1&#39;></p>
      <p class=&#39;key-cell&#39; data-num=&#39;.&#39;>.</p>
      <p class=&#39;key-cell&#39; data-num=&#39;0&#39;>0</p>
      <p class=&#39;key-cell&#39; data-num=&#39;-1&#39;></p>
    </p>
    <p class=&#39;key-confirm&#39; data-num=&#39;S&#39;>确认</p>
  </p>
</p>

レイアウトはすべて私が採用していますp 要素はシミュレーションに使用され、便利で使いやすいです (๑ŐдŐ)b

キーボードのキーに関して、各ボタンにはカスタム属性値 num が設定されており、その目的は、キーを押すことによって生成されるさまざまな効果を区別することです。

イベントは親レベルにバインドされており、キャプチャを通じて特定のクリックされた要素を決定します

スタイルコードはここには投稿しません、具体的な詳細はgithubでホストします〜

入力判定

キーボードで最も重要なことは入力判定です。キーボード入力全体は最初に _handleKeyPress によって処理されます

//处理按键
_handleKeyPress(e) {
 let num = e.target.dataset.num;
 //不同按键处理逻辑
 // -1 代表无效按键，直接返回
 if (num == -1) return false;
 switch (String(num)) {
 //小数点
 case '.':
  this._handleDecimalPoint();
  break;
 //删除键
 case 'D':
  this._handleDeleteKey();
  break;
 //清空键
 case 'C':
  this._handleClearKey();
  break;
 //确认键
 case 'S':
  this._handleConfirmKey();
  break;
 default:
  this._handleNumberKey(num);
  break;
 }
}

キーの種類を小数点、削除 (バックスペース) キー、クリア キー、確認の 5 つのカテゴリに分けていることがわかります。キーと数字キーは、ペアごとに異なる処理機能を使用します。次に、それらを 1 つずつ分析してみましょう。そうでない場合は、小数点に分割されます。入力されている場合は、それを 0 に変更します。そうでない場合は、小数点を現在の文字の末尾に追加します。

削除 (バックスペース) キー。まず現在入力されている文字が空かどうかを判断し、文字がない場合は直接戻ります。そうでない場合は、文字列の最後の文字を削除します。ロジックは最も単純で、現在の文字をクリアするだけです。

//处理小数点函数
 _handleDecimalPoint() {
  //如果包含小数点，直接返回
  if (this.money.indexOf('.') > -1) return false;
  //如果小数点是第一位，补0
  if (!this.money.length)
  this.money = '0.';
  //如果不是，添加一个小数点
  else
  this.money = this.money + '.';
 }

キーを確認し、現在の文字が空かどうかを確認します。空の場合はメッセージが表示され、空でない場合は、入力が 8 の場合、この形式では整列して 8.00 にフォーマットする必要があります。それ以外の場合は、小数点以下 2 桁を保持し、最後に結果をパラメータとして渡します。数字キーのロジックはそれほど複雑ではありません。小数点があるかどうかを確認し、小数点がない場合は 2 桁まで入力します。最初の入力 0 ですか? 0 の場合は小数点のみを入力でき、0000 などの無効な入力も避ける必要があるため、追加の判定を追加しました。それ以外の場合は、現在の文字の直後に追加します。

コンポーネントの紹介

コンポーネントの準備ができました。パスを入力し、対応するコンポーネントに登録し、使用するページに直接配置します。次のようになります

//处理删除键
 _handleDeleteKey() {
  let S = this.money;
  //如果没有输入，直接返回
  if (!S.length) return false;
  //否则删除最后一个
  this.money = S.substring(0, S.length - 1);
 }

。ここで、_confirmEventはクリックして確認しますキーのコールバックでは、パラメーターは入力された量です~

//处理清空键
 _handleClearKey() {
  this.money = '';
 }

効果は以下とほぼ同じです

上記は私が皆さんのためにまとめたものです。今後も皆様のお役に立ちますように。

関連記事:

mock.jsを使用してランダムデータを生成する

Node.jsを使用して情報クローラーを実装する方法(詳細なチュートリアル)

MySQLのrootパスワードの変更

高品質なJSの書き方コード

以上がVue を使用して数値キーボード コンポーネントを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。