移动端 Vue 数字密码键盘组件Numeric-Keyboard

今天给小伙伴们分享一个轻量级的数字/密码键盘组件VueNumericKeyboard。

numeric-keyboard 手机端虚拟数字键盘，包含一个纯键盘UI和输入框套件。有Javascript、Vue、React、Angular多个版本。

安装

$ npm i numeric-keyboard -S

使用插件

<template>
  <div class="input">
    <label>Amount: </label>
    <NumericInput 
      placeholder="touch to input" 
      v-model="amount" 
      type="tel" 
      @press="press"
	/>
  </div>
</template>

<script>
  import { NumericInput } from 'numeric-keyboard'
  export default {
    components: {
      NumericInput
    },
    data() {
      return {
        amount: ''
      }
    },
    methods: {
      press(key) {
        console.log(key)
      }
    }
  }
</script>

组件选项/属性

回调函数/事件

有 number 和 tel 两种内置布局，你可以自定义任何布局样式，数字键盘使用一个二维数组构建了一种表格布局，支持单元格合并。

# 文档地址
https://github.com/viclm/numeric-keyboard/blob/master/docs/README.cn.md

#github地址
https://github.com/viclm/numeric-keyboard

ok，就分享到这里。如果大家有其它Vue键盘组件，欢迎一起交流讨论哈！