The virtual numeric keypad that can be used on Vue.
npm install @formtalker/vue-numeric-keypad``bash`
npm i @formtalker/vue-numeric-keypad
#### Vue 3 with Composition API using
`
#### Vue 3 with Composition API using setup() function`vue
:value="value"
@click.stop="show = true"
readonly
/>
v-model:show="show"
:options="options"
/>
`
#### Vue 3 with Options API
`vue
:value="value"
@click.stop="show = true"
readonly
/>
v-model:show="show"
:options="options"
/>
`
html
...
v-model:show="show"
:options="options"
/>
`
Demo
https://chae-sumin.github.io/vue-numeric-keypad/
Props and Options
The props have to deliver changing values or objects, so bind them with
or :.
In addition, value and show, encryptedValue require two-way binding, so use v-model directive.$3
|property|Description|Required|type|
|-|-|-|-|
|id|ID of the keypad.|False|String|
|v-model:value|The value to change when entering the keypad.|True|String \|
String variable|
|v-model:encryptedValue \| v-model:encrypted-value|Array in which encrypted values will be entered
when options.encrypt: true.|False|Array<string> variable|
|v-model:show|Bind to the v-show on the keypad. And adjust the font size and randomize the key arrangement.|True|Boolean variable \|
Number variable |
|:encryptFunc \| :encrypt-func|A function that encrypts the input
when options.encrypt: true.|False|Function|
|:options|Set several values.
(details can be found below)|False|Object|
$3
|option|Description|type|default|
|-|-|-|-|
|keyRandomize|Randomize the key array whenever the show prop changes.|Boolean|true|
|randomizeWhenClick|If the value is true and keyRandomize is true, randomize the key array whenever you press the key.|Boolean|false|
|fixDeleteKey|The delete key is fixed when the key array is randomized.|Boolean|true|
|fixBlankKey|The Blank key is fixed when the key array is randomized.|Boolean|true|
|zIndex|Sets the z-index value.
Valid when keypadStyles is the default.|Number|1|
|rows|Sets the number of rows in the key array.
Valid when buttonWrapStyles is the default.|Number|4|
|columns|Sets the number of columns in the key array.
Valid when buttonWrapStyles is the default.|Number|3|
|keyArray|Can only have an integer 'number' between -2 and 9 and an empty 'string' type.
-1 means the delete key and -2 means the clear key|Array<number\|string>|columns === 3 ?
[1, 2, 3, 4, 5, 6, 7, 8, 9, "", 0, -1] :
[1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "", -1]|
|deleteKeyText|Delete Button Text|String|'del'|
|clearKeyText|Clear Button Text|String|'clr'|
|encrypt|Using encryption|Boolean|false|
|encryptedChar|Will be placed in :value.sync of the original value.
For strings of length greater than 1, only the first character is valid.|String|'0'|
|activeButtonDelay|The time when activeButtonClass is maintained (ms)|Number|300|
|pseudoClick|Clicking a button triggers a pseudo click on another button|Boolean|false|
|pseudoClickDeleteKey|Clicking the delete button and clear button triggers a pseudo click on another button|Boolean|pseudoClick|
|pseudoClickBlankKey|Clicking the blank button triggers a pseudo click on another button|Boolean|pseudoClick|
|defaultStyle|'all': Use All default styles
'button': Use buttonStyles, activeButtonStyles default styles
'wrap': Use keypadStyles, buttonWrapStyles default styles
'none': Not use all default styles|'all' \| 'button' \| 'wrap' \| 'none'|'all'|
|stopPropagation|Prevents the propagation of events that turn off :show.sync.|Boolean|true|
|vibrate|Using vibrate (reference)|Boolean|true|
|vibratePattern|Vibrate pattern (reference)|Number \|
Array<number>|true|> #### class option
> The class option must meet the following conditions:
> - Only 'a-z' and 'A-Z', '0-9', '_', '-', ' ' can be contained
> - Use ' ' to separate classes.
> - The default style applies to the first class.
>
> |property|default|
> |-|-|
> |
keypadClass|'numeric-keypad'|
> |buttonWrapClass|'numeric-keypad__button-wrap'|
> |buttonClass|'numeric-keypad__button'|
> |deleteButtonClass|'numeric-keypad__button--delete'|
> |clearButtonClass|'numeric-keypad__button--clear'|
> |blankButtonClass|'numeric-keypad__button--blank'|
> |activeButtonClass|'numeric-keypad__button--active'|$3
keypadStyles :
`css
// The font size changes automatically when the button size changes.
// fontSize = Math.min(cellWidth, cellHeight) * 0.3;
.${keypadClass} {
position: fixed;
z-index: ${zIndex};
bottom: 0;
left: 0;
right: 0;
height: 40vh;
padding: 10px;
background-color: #fff;
border-radius: 12px 12px 0 0;
box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.15);
color: #000;
overflow: hidden;
font-size: ${fontSize}px; // When fontSize != 0
}
`
:
`css
.${buttonWrapClass} {
display: flex;
witdth: 100%;
height: 100%;
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
gridGap: 5px;
}
`
:
`css
// const width = calc(${Math.round(1000 / columns) / 10}% - ${Math.ceil(5 * (columns - 1) / columns)}px);
// const height = calc(${Math.round(1000 / rows) / 10}% - ${Math.ceil(5 * (rows - 1) / rows)}px);
.${buttonClass} {
flex: 0 0 auto;
display: flex;
width: ${width};
height: ${height};
justify-content: center;
align-items: center;
background-color: #fff;
border: 1px solid #000;
border-radius: 8px;
font-size: inherit;
}
`
:
`css
// Specificity (0, 2, 0)
.${buttonClass}.${activeButtonClass} {
background-color: #eaeaea;
}
`Tip
- Detect and act on when options are changed. (However, class-related options and are excluded)
- When options are changed, if keyRandomize is true, the key array is changed randomly.
- You can bind only one value to one keypad, or you can bind multiple values.
- You can always keep the value of the show true and adjust the position of the keypad so that the keypad can always be located in a fixed layout.
- You don't have to always bind the visible value.
- If you match the total length of the optional keyArray with the total length of the keypad, the design will not break.
- You can use Slot
html
v-model:show="show"
:options="options"
>
Something you want
`Migration from Vue 2 to Vue 3
If you're migrating from Vue 2, here are the main changes:
$3
- Replace modifier with v-model:
html
`$3
- Vue 2:
- Vue 3: 
cotnmin@gmail.com