1.2.6 • Published 5 months ago

vue-numeric-keypad v1.2.6

Weekly downloads
-
License
MIT
Repository
github
Last release
5 months ago

Vue Numeric Keypad npm npm dev dependency version

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.

Installation

npm i vue-numeric-keypad

Usage

Usage with Module

<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>

Usage with CDN

<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"
/>

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 v-bind: or :. In addition, value and show, encryptedValue require two-way binding, so add the .sync modifier.

props

propertyDescriptionRequiredtype
idID of the keypad.FalseString
:value | :value.syncThe value to change when entering the keypad.TrueString | String variable
:encryptedValue.sync | :encrypted-value.syncArray in which encrypted values will be enteredwhen options.encrypt: true.FalseArray<string> variable
:show.syncBind to the v-show on the keypad. And adjust the font size and randomize the key arrangement.TrueBoolean variable | Number variable
:encryptFunc | :encrypt-funcA function that encrypts the inputwhen options.encrypt: true.FalseFunction
:optionsSet several values.(details can be found below)FalseObject

options

optionDescriptiontypedefault
keyRandomizeRandomize the key array whenever the show prop changes.Booleantrue
randomizeWhenClickIf the value is true and keyRandomize is true, randomize the key array whenever you press the key.Booleanfalse
fixDeleteKeyThe delete key is fixed when the key array is randomized.Booleantrue
fixBlankKeyThe Blank key is fixed when the key array is randomized.Booleantrue
zIndexSets the z-index value.Valid when keypadStyles is the default.Number1
rowsSets the number of rows in the key array.Valid when buttonWrapStyles is the default.Number4
columnsSets the number of columns in the key array.Valid when buttonWrapStyles is the default.Number3
keyArrayCan only have an integer 'number' between -2 and 9 and an empty 'string' type.-1 means the delete key and -2 means the clear keyArray<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
deleteKeyTextDelete Button TextString'del'
clearKeyTextClear Button TextString'clr'
encryptUsing encryptionBooleanfalse
encryptedCharWill be placed in :value.sync of the original value.For strings of length greater than 1, only the first character is valid.String'0'
activeButtonDelayThe time when activeButtonClass is maintained (ms)Number300
pseudoClickClicking a button triggers a pseudo click on another buttonBooleanfalse
pseudoClickDeleteKeyClicking the delete button and clear button triggers a pseudo click on another buttonBooleanpseudoClick
pseudoClickBlankKeyClicking the blank button triggers a pseudo click on another buttonBooleanpseudoClick
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'
stopPropagationPrevents the propagation of events that turn off :show.sync.Booleantrue
vibrateUsing vibrate (reference)Booleantrue
vibratePatternVibrate 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.
propertydefault
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'

styles defaults

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;
}

Tip

  • Detect and act on when options are changed. (However, class-related options and encrypt 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
    <VueNumericKeypad
         :value.sync="value"
         :show.sync="show"
         :options="options"
    >
     <div>Something you want</div>
    </VueNumericKeypad>

License

NPM

Contact

cotnmin@gmail.com

1.2.6

5 months ago

1.2.5

11 months ago

1.2.4

1 year ago

1.2.0

2 years ago

1.2.3

2 years ago

1.2.2

2 years ago

1.2.1

2 years ago

1.1.2

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago