custom-keyboard-vue

基于vue的移动端自定义键盘（可用于自定义16进制键盘或者数字安全键盘）

最近有个移动端h5页面的项目，需要用到16进制键盘，所以就自己封装了一个自定义键盘组件，如下

使用方法

1. 安装

1
2
npm install custom-keyboard-vue
//cnpm install custom-keyboard-vue

1. 引入

在main.js中引入

1
2
import customKeyboard from 'custom-keyboard-vue'
Vue.use(customKeyboard)

3. 组件中使用

1
<custom-keyboard :keyboardShow.sync="keyboardShow" :value.sync="value"></custom-keyboard>

4.api

属性 描述 类型 默认值
keyboardShow 控制键盘显示隐藏 Boolean false
value 输入框绑定的值 String 空
customKeyboard 自定义键盘 Array 见下
confirm 确认按钮绑定事件 Function alert(‘确认’)

customKeyboard
默认传入一个二维数组, 分别对应行列

属性 描述
key 键盘元素值, 可传数字或字母或者关键字（分别对应事件：DELETE/删除，CLEAR/清空，CONFIRM/确认，CANCEL/取消）
label 键盘元素显示值 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//默认值（16进制键盘）：
 [
    [{key: '1', label: '1'}, {key: '2', label: '2'}, {key: '3', label: '3'}, {
      key: 'F',
      label: 'F'
      }, {key: 'DELETE', label: '删除'}],
    [{key: '4', label: '4'}, {key: '5', label: '5'}, {key: '6', label: '6'}, {
      key: 'E',
      label: 'E'
      }, {key: 'CLEAR', label: '清空'}],
    [{key: '7', label: '7'}, {key: '8', label: '8'}, {key: '9', label: '9'}, {
       key: 'D',
       label: 'D'
       }, {key: 'CONFIRM', label: '确认'}],
    [{key: '0', label: '0'}, {key: 'A', label: 'A'}, {key: 'B', label: 'B'}, {
      key: 'C',
      label: 'C'
      }, {key: 'CANCEL', label: '取消'}],
 ]

1
2
3
4
5
6
7
//数字键盘
[
    [{key: '1', label: '1'}, {key: '2', label: '2'}, {key: '3', label: '3'}],
    [{key: '4', label: '4'}, {key: '5', label: '5'}, {key: '6', label: '6'}],
    [{key: '7', label: '7'}, {key: '8', label: '8'}, {key: '9', label: '9'}],
    [{key: 'CLEAR', label: '清空'}, {key: '0', label: '0'}, {key: 'DELETE', label: '删除'}],
]

demo

http://zhudongdong.xyz/custom-keyboard-vue/Demo/

tip:

阻止调起手机默认键盘的方法
1
2
3
4
document.activeElement.setAttribute('readonly', 'readonly')
           setTimeout(() => {
               document.activeElement.removeAttribute('readonly')
           });