點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁(yè) - 科技 - 知識(shí)百科 - 正文

使用Vue自定義數(shù)字鍵盤(pán)組件(體驗(yàn)度極好)

來(lái)源：懂視網(wǎng) 責(zé)編：小OO 時(shí)間：2020-11-27 22:23:34

使用Vue自定義數(shù)字鍵盤(pán)組件(體驗(yàn)度極好)

為了滿足用戶體驗(yàn)，小編用vue寫(xiě)了一個(gè)自定義數(shù)字鍵盤(pán)組件，用戶體驗(yàn)度還不錯(cuò)。廢話不多說(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>。

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀為了滿足用戶體驗(yàn)，小編用vue寫(xiě)了一個(gè)自定義數(shù)字鍵盤(pán)組件，用戶體驗(yàn)度還不錯(cuò)。廢話不多說(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>。

為了滿足用戶體驗(yàn)，小編用vue寫(xiě)了一個(gè)自定義數(shù)字鍵盤(pán)組件，用戶體驗(yàn)度還不錯(cuò)。

廢話不多說(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)有的話，也要分小數(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)站的支持！

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

使用Vue自定義數(shù)字鍵盤(pán)組件(體驗(yàn)度極好)

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：使用 VUE 體驗(yàn)

熱門(mén)焦點(diǎn)

使用Vue自定義數(shù)字鍵盤(pán)組件(體驗(yàn)度極好)

使用Vue自定義數(shù)字鍵盤(pán)組件(體驗(yàn)度極好)

使用Vue自定義數(shù)字鍵盤(pán)組件(體驗(yàn)度極好)

最新推薦

猜你喜歡

熱門(mén)推薦