使用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
鍵盤按鍵方面,每個按鈕都設(shè)置了其自定義屬性值 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ù)字鍵,邏輯也不是很復(fù)雜,主要先看其有沒有小數(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; } } }
組件引入
組件準備好了,只需填好路徑,在對應(yīng)的 components 中注冊后,直接放在頁面上使用使用即可,類似下面
<calculation @confirmEvent="_confirmEvent"></calculation>
其中, _confirmEvent 是點擊確認鍵的回調(diào),參數(shù)就是輸入的金額,我這里只是簡單的打印而已~
_confirmEvent(res){ console.log(res) }
效果就跟下面差不多,
總結(jié)
以上所述是小編給大家介紹的使用Vue自定義數(shù)字鍵盤組件(體驗度極好),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
在Vue中實現(xiàn)地圖熱點展示與交互的方法詳解(如熱力圖)
隨著大數(shù)據(jù)和可視化技術(shù)的發(fā)展,地圖熱點展示越來越受到人們的關(guān)注,在Vue應(yīng)用中,我們通常需要實現(xiàn)地圖熱點的展示和交互,以便更好地呈現(xiàn)數(shù)據(jù)和分析結(jié)果,本文將介紹在Vue中如何進行地圖熱點展示與交互,包括熱力圖、點聚合等2023-07-07Vue?Echarts報錯Initialize?failed:?invalid?dom解決方法
最近因為工作需要,用到了ECharts做圖表,也遇到了問題,就來跟大家總結(jié)分享一下,下面這篇文章主要給大家介紹了關(guān)于Vue?Echarts報錯Initialize?failed:?invalid?dom的解決方法,需要的朋友可以參考下2023-06-06在 Vue 3 中設(shè)置 `@` 指向根目錄的幾種常見方法匯總
在 Vue 3 項目開發(fā)中,為了方便管理和引用文件路徑,設(shè)置 @ 指向根目錄是一項常見的需求,下面給大家分享在Vue3中設(shè)置 `@` 指向根目錄的方法匯總,感興趣的朋友一起看看吧2024-06-06Vue ElementUI this.$confirm async await封
這篇文章主要介紹了Vue ElementUI this.$confirm async await封裝方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09