使用Vue自定義數(shù)字鍵盤組件(體驗度極好)
為了滿足用戶體驗，小編用vue寫了一個自定義數(shù)字鍵盤組件，用戶體驗度還不錯。
廢話不多說，先上效果圖吧~
效果圖
具體實現(xiàn)
布局排版
<div class='key-container'>
<div class='key-title'>請輸入金額</div>
<div class='input-box'>{{ money }}</div>
<div class='keyboard' @click.stop='_handleKeyPress'>
<div class='key-row'>
<div class='key-cell' data-num='7'>7</div>
<div class='key-cell' data-num='8'>8</div>
<div class='key-cell' data-num='9'>9</div>
<div class='key-cell' data-num='D'>C</div>
</div>
<div class='key-row'>
<div class='key-cell' data-num='4'>4</div>
<div class='key-cell' data-num='5'>5</div>
<div class='key-cell' data-num='6'>6</div>
<div class='key-cell' data-num='C'>清空</div>
</div>
<div class='key-row'>
<div class='key-cell' data-num='1'>1</div>
<div class='key-cell' data-num='2'>2</div>
<div class='key-cell' data-num='3'>3</div>
<div class='key-cell' data-num='-1'></div>
</div>
<div class='key-row'>
<div class='key-cell disabled' data-num='-1'></div>
<div class='key-cell' data-num='.'>.</div>
<div class='key-cell' data-num='0'>0</div>
<div class='key-cell' data-num='-1'></div>
</div>
<div class='key-confirm' data-num='S'>確認</div>
</div>
</div>
布局方面我全部采用了 div 元素來模擬，方便好用 (๑ŐдŐ)b
鍵盤按鍵方面，每個按鈕都設置了其自定義屬性值 num ，目的就是為了區(qū)分按鍵后產(chǎn)生不同的效果
事件綁定在了父級，通過捕獲來確定具體點擊的元素
樣式代碼我在這里就不貼了，具體的我托管到 github 上了~
輸入判斷
對于鍵盤來說，最主要的就是輸入判斷，整個鍵盤的輸入都是先經(jīng)過 _handleKeyPress 進行處理的
//處理按鍵
_handleKeyPress(e) {
let num = e.target.dataset.num;
//不同按鍵處理邏輯
// -1 代表無效按鍵，直接返回
if (num == -1) return false;
switch (String(num)) {
//小數(shù)點
case '.':
this._handleDecimalPoint();
break;
//刪除鍵
case 'D':
this._handleDeleteKey();
break;
//清空鍵
case 'C':
this._handleClearKey();
break;
//確認鍵
case 'S':
this._handleConfirmKey();
break;
default:
this._handleNumberKey(num);
break;
}
}
可以看出，我將按鍵種類分為了，五大類，分別是 小數(shù)點 、 刪除（退格）鍵 、 清空鍵 、 確認鍵 和 數(shù)字鍵 ，分別對用不同的處理函數(shù)，接下來我們一一來分析~
小數(shù)點，由于最多只能輸入一個小數(shù)點，因此需要對其判斷，如果有小數(shù)點直接返回；沒有的話，也要分小數(shù)點是不是第一個輸入的字符，如果是就將其變成 0. ，如果不是將小數(shù)點追加到當前字符末尾；
//處理小數(shù)點函數(shù)
_handleDecimalPoint() {
//如果包含小數(shù)點，直接返回
if (this.money.indexOf('.') > -1) return false;
//如果小數(shù)點是第一位，補0
if (!this.money.length)
this.money = '0.';
//如果不是，添加一個小數(shù)點
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 這種形式，否則就直接保留兩位小數(shù)，最后在觸發(fā) 回調(diào)，并把結(jié)果作為參數(shù)傳遞過去；
_handleConfirmKey() {
let S = this.money;
//未輸入
if (!S.length){
alert( '您目前未輸入!' )
return false;
}
//將 8. 這種轉(zhuǎn)換成 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)
}
數(shù)字鍵，邏輯也不是很復雜，主要先看其有沒有小數(shù)點，如果有小數(shù)點，那么最多輸入兩位數(shù)字，如果沒有小數(shù)點，得判斷第一位輸入的是是不是0 ， 如果是0，那么接下來就只能輸入小數(shù)點了，而且也要杜絕 0000 這種無效的輸入，因此我多加了一個判斷，否則就直接追加在當前字符后面即可；
//處理數(shù)字
_handleNumberKey(num) {
let S = this.money;
//如果有小數(shù)點且小數(shù)點位數(shù)不小于2
if ( S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length < 2)
this.money = S + num;
//沒有小數(shù)點
if (!(S.indexOf('.') > -1)) {
//如果第一位是0，只能輸入小數(shù)點
if (num == 0 && S.length == 0)
this.money = '0.';
else {
if (S.length && Number(S.charAt(0)) === 0) return;
this.money = S + num;
}
}
}
組件引入
組件準備好了，只需填好路徑，在對應的 components 中注冊后，直接放在頁面上使用使用即可，類似下面
<calculation @confirmEvent="_confirmEvent"></calculation>
其中， _confirmEvent 是點擊確認鍵的回調(diào)，參數(shù)就是輸入的金額，我這里只是簡單的打印而已~
_confirmEvent(res){
console.log(res)
}
效果就跟下面差不多，
總結(jié)
以上所述是小編給大家介紹的使用Vue自定義數(shù)字鍵盤組件(體驗度極好)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
本文主要介紹了Vue實現(xiàn)table列表項上下移動的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要介紹了react+?ts?vite搭建及二次封裝請求，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04
這篇文章主要為大家介紹了effect返回runner單測實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
vue循環(huán)el-button實現(xiàn)點擊哪個按鈕,那個按鈕就變色
這篇文章主要介紹了vue循環(huán)el-button實現(xiàn)點擊哪個按鈕,那個按鈕就變色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue 如何import服務器上的js配置文件，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)列表左右聯(lián)動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
在vue項目中集成graphql(vue-ApolloClient)
這篇文章主要介紹了在vue項目中集成graphql(vue-ApolloClient)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue進行post和get請求實例講解，違章圍繞post和get請求的相關資料展開詳細內(nèi)容，具有一的的參考價值，需要的小伙伴可以參考一下2022-03-03
這篇文章主要介紹了vue.config.js中配置Vue的路徑別名的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
Vue.js使用axios動態(tài)獲取response里的data數(shù)據(jù)操作
這篇文章主要介紹了Vue.js使用axios動態(tài)獲取response里的data數(shù)據(jù)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09