Vue custom numeric keypad

preface

Recently do Vue development, because there are a lot of pages involved in the amount of input, the product always feel that the amount of input with the original experience is not good, urging me to find time to optimize every day, native control and optimize a wool, go back and wait for death ~

Since I wanted user experience, and I was desperate for native controls, so! I have a bold idea….

Let’s write one ourselves!

Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

rendering

The specific implementation

The layout and typesetting

<div class='key-container'> <div class='key-title'> Please enter amount </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 "> clear < / 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' > confirm < / div > </div> </div>Copy the code
  • I used all the layoutdivB: Of course
  • For keyboard keys, each button has its own custom property value setnum, the purpose is to distinguish between the different effects produced after pressing the button
  • Events are bound to the parent level and are captured to determine which element to click on

I will not paste the style code here, I host the specific to Github ~

Enter judgment

For the keyboard, the most important is the input judgment, the entire keyboard input is first through _handleKeyPress processing

_handleKeyPress(e) {let num = e.target.dataset. Num; If (num == -1) return false; Switch (String(num)) {// Decimal point case '.': this._handleDecimalPoint(); break; // Delete key case 'D': this._handleDeleteKey(); break; Case 'C': this._handleclearKey (); break; // Confirm key case 'S': this._handleconfirmKey (); break; default: this._handleNumberKey(num); break; }}Copy the code

As can be seen, I will be divided into five categories, which are the decimal point, delete (backspace) key, empty key, confirm key and number key, respectively corresponding to different processing functions, next we analyze ~

  • Decimal point, because you can only enter one decimal point at most, so you need to judge it, if there is a decimal point directly return; If not, the decimal point is the first character to be entered. If so, change it to 0. If not append the decimal point to the end of the current character.

    _handleDecimalPoint() {if (this.money.indexof ('.') > -1) return false; // If the decimal point is first, add 0 if (! this.money.length) this.money = '0.'; // If not, add a decimal point else this.money = this.money + '. }Copy the code

  • Delete (backspace) key, processing is more convenient, first determine whether the current input character is empty, if there is no character, directly return, otherwise the last character of the string will be deleted;

    _handleDeleteKey() {let S = this.money; // If there is no input, return if (! S.length) return false; This. money = s.substring (0, s.length-1); }Copy the code

  • Empty key, the most simple logic, directly the current character can be emptied;

    // Handle the empty key _handleClearKey() {this.money = "; }Copy the code

  • Confirm key, judge whether the current character is empty, if it is empty, prompt message and return, we also need to judge if it is not empty, if the input is 8. For this format, we need to format the alignment to 8.00, otherwise we just keep two decimal places, and finally trigger the callback and pass the result as an argument;

    _handleConfirmKey() { let S = this.money; // No input if (! S.length){alert(' You have not entered at present! ' ) return false; } / / will be 8. This is converted into 8.00 if (S.i ndexOf ('. ') > 1 && S.i ndexOf ('. ') = = (S.l ength - 1)) S = Number (S.s ubstring (0, S.length - 1)).toFixed(2); // keep two digits S = Number(S). ToFixed (2); this.$emit('confirmEvent',S) }Copy the code

  • Numeric keys, the logic is not very complicated, mainly to see if the decimal point first, if there is a decimal point, then the most two input Numbers, if there is no decimal point, to judge the first input is zero, if it is 0, then can only enter the decimal point, but also to put an end to 0000 this invalid input, so I add a judgment, Otherwise, append it directly to the current character.

    _handleNumberKey(num) {let S = this.money; If (s.indexof ('.') > -1 &&s.substring (s.indexof ('.') + 1).length < 2) this.money = S + num; // No decimal point if (! (S.i ndexOf (') > 1)) {/ / if the first is 0, only can enter the decimal point if (num = = 0 && S.l ength = = 0) this. Money = '0. else { if (S.length && Number(S.charAt(0)) === 0) return; this.money = S + num; }}}Copy the code

Component into

When the component is ready, just fill in the path, register in the corresponding components, and place it directly on the page to use

<calculation @confirmEvent="_confirmEvent"></calculation>
Copy the code

Where _confirmEvent is the callback from clicking the confirm key and the parameter is the amount entered, I’m just printing it out here

_confirmEvent(res){
	console.log(res)
}
Copy the code

It’s going to look something like this,

conclusion

How, is not very simple, so easy, not afraid of the product let me experience every day. Of course, I just wrote a basis here, specific also have to suit their own business logic, interested students can be in their own packaging, the realization of pure numbers or with a decimal point direct switch type keyboard, see you play ~

Complete code, please stamp here ~