Vue-akeyboard NPM

简介

本项目是一个vue虚拟键盘项目，基于akeyboard改造，修改了部分样式，并支持自定义键盘。

安装

组件

$ npm i vue-akeyboard
或
$ yarn add vue-akeyboard

源码

github

$ yarn
$ yarn serve

使用

main.js

import VueAkeyboard from 'vue-akeyboard'
Vue.use(VueAkeyboard)

vue

<template>
  <div>
    <input id="text"
           v-model="text">
    <input id="text2"
           v-model="text2">
    <vue-akeyboard ref="kb"
                   :ele="ele"
                   :keys="keys"
                   @click="handleKeyboardClick"
                   style="width: 800px; height: 300px"></vue-akeyboard>
  </div>
</template>

<script>
export default {
  data () {
    return {
      keys: [
        ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
        ['a', 'b', 'c', 'd', 'Shift', '清空']
      ],
      text: '',
      text2: '',
      ele: 'text'
    }
  },
  mounted () {
    // 自定义按键绑定click
    this.$refs.kb.bindClick("清空", () => {
      this[this.ele] = ''
    })
    // 模拟更换输入框
    setTimeout(() => {
      this.ele = "text2"
    }, 5000);
  },
  methods: {
    // 键盘点击
    handleKeyboardClick (key, val) {
      this[this.ele] = val
    }
  }
}
</script>

属性

参数	说明	类型	默认值	可选值
ele	输入框的id	String	无	-
keys	自定义按键	Array	无	-
theme	主题	String	'default'	default/dark/green/classic
type	类型	String	'default'	default/number/mobile
fixed-bottom-center	固定在底部中间	Boolean	false	true/false
rebind	更换输入框时是否重新绑定之前的自定义按钮点击事件	Boolean	true	true/false