使用Vue自定義數(shù)字鍵盤(pán)組件(體驗(yàn)度極好)
為了滿(mǎn)足用戶(hù)體驗(yàn)，小編用vue寫(xiě)了一個(gè)自定義數(shù)字鍵盤(pán)組件，用戶(hù)體驗(yàn)度還不錯(cuò)。
廢話(huà)不多說(shuō)，先上效果圖吧~
效果圖
具體實(shí)現(xiàn)
布局排版
<div class='key-container'>
<div class='key-title'>請(qǐng)輸入金額</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'>確認(rèn)</div>
</div>
</div>
布局方面我全部采用了 div 元素來(lái)模擬，方便好用 (๑ŐдŐ)b
鍵盤(pán)按鍵方面，每個(gè)按鈕都設(shè)置了其自定義屬性值 num ，目的就是為了區(qū)分按鍵后產(chǎn)生不同的效果
事件綁定在了父級(jí)，通過(guò)捕獲來(lái)確定具體點(diǎn)擊的元素
樣式代碼我在這里就不貼了，具體的我托管到 github 上了~
輸入判斷
對(duì)于鍵盤(pán)來(lái)說(shuō)，最主要的就是輸入判斷，整個(gè)鍵盤(pán)的輸入都是先經(jīng)過(guò) _handleKeyPress 進(jìn)行處理的
//處理按鍵
_handleKeyPress(e) {
let num = e.target.dataset.num;
//不同按鍵處理邏輯
// -1 代表無(wú)效按鍵，直接返回
if (num == -1) return false;
switch (String(num)) {
//小數(shù)點(diǎn)
case '.':
this._handleDecimalPoint();
break;
//刪除鍵
case 'D':
this._handleDeleteKey();
break;
//清空鍵
case 'C':
this._handleClearKey();
break;
//確認(rèn)鍵
case 'S':
this._handleConfirmKey();
break;
default:
this._handleNumberKey(num);
break;
}
}
可以看出，我將按鍵種類(lèi)分為了，五大類(lèi)，分別是 小數(shù)點(diǎn) 、 刪除（退格）鍵 、 清空鍵 、 確認(rèn)鍵 和 數(shù)字鍵 ，分別對(duì)用不同的處理函數(shù)，接下來(lái)我們一一來(lái)分析~
小數(shù)點(diǎn)，由于最多只能輸入一個(gè)小數(shù)點(diǎn)，因此需要對(duì)其判斷，如果有小數(shù)點(diǎn)直接返回；沒(méi)有的話(huà)，也要分小數(shù)點(diǎn)是不是第一個(gè)輸入的字符，如果是就將其變成 0. ，如果不是將小數(shù)點(diǎn)追加到當(dāng)前字符末尾；
//處理小數(shù)點(diǎn)函數(shù)
_handleDecimalPoint() {
//如果包含小數(shù)點(diǎn)，直接返回
if (this.money.indexOf('.') > -1) return false;
//如果小數(shù)點(diǎn)是第一位，補(bǔ)0
if (!this.money.length)
this.money = '0.';
//如果不是，添加一個(gè)小數(shù)點(diǎn)
else
this.money = this.money + '.';
}
刪除（退格）鍵，處理起來(lái)比較方便，先判斷當(dāng)前輸入的字符是否為空，如果沒(méi)有字符，直接返回，否則將字符串最后一個(gè)字符刪除；
//處理刪除鍵
_handleDeleteKey() {
let S = this.money;
//如果沒(méi)有輸入，直接返回
if (!S.length) return false;
//否則刪除最后一個(gè)
this.money = S.substring(0, S.length - 1);
}
清空鍵，邏輯最簡(jiǎn)單，直接將當(dāng)前字符清空即可；
//處理清空鍵
_handleClearKey() {
this.money = '';
}
確認(rèn)鍵，判斷當(dāng)前字符是否為空，為空就提示信息并返回，不為空我們也要進(jìn)行判斷，如果輸入的是 8. 這種格式，我們需要對(duì)齊格式化成 8.00 這種形式，否則就直接保留兩位小數(shù)，最后在觸發(fā) 回調(diào)，并把結(jié)果作為參數(shù)傳遞過(guò)去；
_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ù)字鍵，邏輯也不是很復(fù)雜，主要先看其有沒(méi)有小數(shù)點(diǎn)，如果有小數(shù)點(diǎn)，那么最多輸入兩位數(shù)字，如果沒(méi)有小數(shù)點(diǎn)，得判斷第一位輸入的是是不是0 ， 如果是0，那么接下來(lái)就只能輸入小數(shù)點(diǎn)了，而且也要杜絕 0000 這種無(wú)效的輸入，因此我多加了一個(gè)判斷，否則就直接追加在當(dāng)前字符后面即可；
//處理數(shù)字
_handleNumberKey(num) {
let S = this.money;
//如果有小數(shù)點(diǎn)且小數(shù)點(diǎn)位數(shù)不小于2
if ( S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length < 2)
this.money = S + num;
//沒(méi)有小數(shù)點(diǎn)
if (!(S.indexOf('.') > -1)) {
//如果第一位是0，只能輸入小數(shù)點(diǎn)
if (num == 0 && S.length == 0)
this.money = '0.';
else {
if (S.length && Number(S.charAt(0)) === 0) return;
this.money = S + num;
}
}
}
組件引入
組件準(zhǔn)備好了，只需填好路徑，在對(duì)應(yīng)的 components 中注冊(cè)后，直接放在頁(yè)面上使用使用即可，類(lèi)似下面
<calculation @confirmEvent="_confirmEvent"></calculation>
其中， _confirmEvent 是點(diǎn)擊確認(rèn)鍵的回調(diào)，參數(shù)就是輸入的金額，我這里只是簡(jiǎn)單的打印而已~
_confirmEvent(res){
console.log(res)
}
效果就跟下面差不多，
總結(jié)
以上所述是小編給大家介紹的使用Vue自定義數(shù)字鍵盤(pán)組件(體驗(yàn)度極好)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
在Vue中實(shí)現(xiàn)地圖熱點(diǎn)展示與交互的方法詳解（如熱力圖）
隨著大數(shù)據(jù)和可視化技術(shù)的發(fā)展，地圖熱點(diǎn)展示越來(lái)越受到人們的關(guān)注，在Vue應(yīng)用中，我們通常需要實(shí)現(xiàn)地圖熱點(diǎn)的展示和交互，以便更好地呈現(xiàn)數(shù)據(jù)和分析結(jié)果，本文將介紹在Vue中如何進(jìn)行地圖熱點(diǎn)展示與交互，包括熱力圖、點(diǎn)聚合等2023-07-07
vue 實(shí)現(xiàn)基礎(chǔ)組件的自動(dòng)化全局注冊(cè)
這篇文章主要介紹了vue 實(shí)現(xiàn)基礎(chǔ)組件的自動(dòng)化全局注冊(cè)的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
Vue項(xiàng)目如何實(shí)現(xiàn)切換主題色思路
這篇文章主要介紹了Vue項(xiàng)目如何實(shí)現(xiàn)切換主題色思路，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue?Echarts報(bào)錯(cuò)Initialize?failed:?invalid?dom解決方法
最近因?yàn)楣ぷ餍枰?用到了ECharts做圖表,也遇到了問(wèn)題,就來(lái)跟大家總結(jié)分享一下,下面這篇文章主要給大家介紹了關(guān)于Vue?Echarts報(bào)錯(cuò)Initialize?failed:?invalid?dom的解決方法,需要的朋友可以參考下2023-06-06
在 Vue 3 中設(shè)置 `@` 指向根目錄的幾種常見(jiàn)方法匯總
在 Vue 3 項(xiàng)目開(kāi)發(fā)中,為了方便管理和引用文件路徑,設(shè)置 @ 指向根目錄是一項(xiàng)常見(jiàn)的需求,下面給大家分享在Vue3中設(shè)置 `@` 指向根目錄的方法匯總,感興趣的朋友一起看看吧2024-06-06
這篇文章主要為大家詳細(xì)介紹了VUE多層路由嵌套的實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要給大家介紹了關(guān)于vue中keep-alive組件的入門(mén)使用教程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
前端部署踩坑實(shí)戰(zhàn)記錄(部署后404、頁(yè)面空白)
Vue項(xiàng)目打包部署Nginx服務(wù)器后,刷新頁(yè)面后出現(xiàn)404的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于前端部署踩坑的實(shí)戰(zhàn)記錄,文中包括部署后404、頁(yè)面空白等問(wèn)題的解決辦法,需要的朋友可以參考下2024-09-09
Vue ElementUI this.$confirm async await封
這篇文章主要介紹了Vue ElementUI this.$confirm async await封裝方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要給大家介紹了關(guān)于你不可不知的Vue.js列表渲染的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue.js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10