使用Vue如何實現數字鍵盤組件

最近做Vue 開發，因為有不少頁面涉及到金額輸入，產品老是覺得用原生的input 進行金額輸入的話體驗很不好，於是自己動手寫了一個使用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;
 }
}

可以看出，我將按鍵種類分為了，五大類，分別是小數點、 刪除（退格）鍵、 清空鍵、 確認鍵和數字鍵，分別對用不同的處理函數，接下來我們一一來分析~

小數點，由於最多只能輸入一個小數點，因此需要對其判斷，如果有小數點直接返回；沒有的話，也要分小數點是不是第一個輸入的字符，如果是就將其變成0. ，如果不是將小數點追加到當前字符末尾；

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

刪除（退格）鍵，處理起來比較方便，先判斷當前輸入的字符是否為空，如果沒有字符，直接傳回，否則將字串最後一個字元刪除；

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

清空鍵，邏輯最簡單，直接將目前字元清空即可；

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

確認鍵，判斷目前字元是否為空，為空就提示訊息並返回，不為空我們也要進行判斷，如果輸入的是8. 這種格式，我們需要對齊格式化成8.00 這種形式，否則就直接保留兩位小數，最後在觸發回調，並把結果當作參數傳遞過去；

_handleConfirmKey() {
  let S = this.money;
  //未输入
  if (!S.length){
  alert( '您目前未输入!' )
  return false;
  }
  //将 8. 这种转换成 8.00
  if (S.indexOf('.') > -1 && S.indexOf('.') == (S.length - 1))
  S = Number(S.substring(0, S.length - 1)).toFixed(2);
  //保留两位
  S = Number(S).toFixed(2);
  this.$emit('confirmEvent',S)
 }

數字鍵，邏輯也不是很複雜，主要先看其有沒有小數點，如果有小數點，那麼最多輸入兩位數字，如果沒有小數點，得判斷第一位輸入的是不是0 ， 如果是0，那麼接下來就只能輸入小數點了，而且也要杜絕0000 這種無效的輸入，因此我多加了一個判斷，否則就直接追加在當前字符後面即可；

//处理数字
 _handleNumberKey(num) {
  let S = this.money;
  //如果有小数点且小数点位数不小于2
  if ( S.indexOf(&#39;.&#39;) > -1 && S.substring(S.indexOf(&#39;.&#39;) + 1).length < 2)
  this.money = S + num;
  //没有小数点
  if (!(S.indexOf(&#39;.&#39;) > -1)) {
  //如果第一位是0，只能输入小数点
  if (num == 0 && S.length == 0)
   this.money = &#39;0.&#39;;
  else {
   if (S.length && Number(S.charAt(0)) === 0) return;
   this.money = S + num;
  }
  }
 }

元件引入

#元件準備好了，只需填入路徑，在對應的components 中註冊後，直接放在頁面上使用使用即可，類似下面

<calculation @confirmEvent="_confirmEvent"></calculation>

其中， _confirmEvent 是點擊確認鍵的回調，參數就是輸入的金額，我這裡只是簡單的打印而已~

_confirmEvent(res){
 console.log(res)
}

效果就跟下面差不多，

 

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

使用mock.js產生隨機資料

使用Node.js如何實作資訊爬蟲（詳細教學）

MySQL修改root密碼

如何寫有品質的JS程式碼

#

以上是使用Vue如何實現數字鍵盤組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！