Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
vue-numeric-keypad
Advanced tools
Readme
The virtual numeric keypad that can be used on Vue. It was produced in NPM v6.14.13 and Vue v2.6.14 environments. By default, keys are randomly arranged and you can specify various settings using options.
npm i vue-numeric-keypad
<template>
<div id="app">
<input
type="number"
:value="value"
@click.stop="show = true"
readonly
/>
<VueNumericKeypad
:value.sync="value"
:show.sync="show"
:options="options"
/>
</div>
</template>
<script>
import VueNumericKeypad from "vue-numeric-keypad";
export default {
name: "App",
components: {
VueNumericKeypad,
},
data() {
return {
value: "",
show: 0,
options: {
keyRandomize: true,
randomizeClick: true,
fixDeleteKey: false,
},
};
},
created() {
document.addEventListener('click', function () {
this.show = 0;
}.bind(this));
}
};
</script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-numeric-keypad@1.2.3/dist/vue-numeric-keypad.min.js"></script>
<script>
Vue.use(VueNumericKeypad);
new Vue({ ... });
</script>
...
<vue-numeric-keypad
:value.sync="value"
:show.sync="show"
:options="options"
/>
https://chae-sumin.github.io/vue-numeric-keypad/
The props have to deliver changing values or objects, so bind them with v-bind:
or :
.
In addition, value
and show
, encryptedValue
require two-way binding, so add the .sync
modifier.
property | Description | Required | type |
---|---|---|---|
id | ID of the keypad. | False | String |
:value | :value.sync | The value to change when entering the keypad. | True | String | String variable |
:encryptedValue.sync | :encrypted-value.sync | Array in which encrypted values will be entered when options.encrypt: true . | False | Array<string> variable |
:show.sync | 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 |
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'
keypadStyles
:
// 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
}
buttonWrapStyles
:
.${buttonWrapClass} {
display: flex;
witdth: 100%;
height: 100%;
justify-content: space-between;
align-content: space-between;
flex-wrap: wrap;
gridGap: 5px;
}
buttonStyles
:
// 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;
}
activeButtonStyles
:
// Specificity (0, 2, 0)
.${buttonClass}.${activeButtonClass} {
background-color: #eaeaea;
}
encrypt
are excluded)keyRandomize
is true, the key array is changed randomly.keyArray
with the total length of the keypad, the design will not break.Slot
<VueNumericKeypad
:value.sync="value"
:show.sync="show"
:options="options"
>
<div>Something you want</div>
</VueNumericKeypad>
FAQs
The virtual numeric keypad that can be used on Vue.
The npm package vue-numeric-keypad receives a total of 39 weekly downloads. As such, vue-numeric-keypad popularity was classified as not popular.
We found that vue-numeric-keypad demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.