Skip to content

A Vue.js component for custom keyboard. (vue自定义键盘组件/车牌号键盘组件)

License

Notifications You must be signed in to change notification settings

xiaoku1990/vue-custom-keyboard

 
 

Repository files navigation

vue-custom-keyboard

A Vue.js component for keyboard

Installation

npm i vue-custom-keyboard --save

Usage

Impoart and use it in a single file component.

<template>
  <VueCustomKeyboard></VueCustomKeyboard>
</template>

<script>
  import VueCustomKeyboard from 'vue-custom-keyboard'
  import 'vue-custom-keyboard/dist/vue-custom-keyboard.min.css'

  export default {
    name: 'componentWithKeyboard',
    components: {
        VueCustomKeyboard
    }
  }
</script>

Props config

props: {
  /**
   * Visibility for keyboard.
   * @default false
   * @type {Boolean}
   */
  isOpen: {
    type: Boolean,
    default: true
  },
  level1: {
    type: String,
    default: '粤京津泸鲁冀云辽黑湘皖新苏浙赣鄂桂甘晋蒙陕吉闽贵青藏川宁琼豫渝台港澳'
  },
  level2: {
    type: String,
    default: '1234567890QWERTYUPASDFGHJKLZXCVBNM'
  },
  maxLength: {
    type: Number,
    default: 7
  },
  onChange: {
    type: Function
  },
  onBlur: {
    type: Function
  },
  onDone: {
    type: Function
  },
  /**
   * For remembering previous value.
   * @default ''
   * @type {String}
   */
  defaultValue: {
    type: String,
    default: ''
  }
}

Demo

Check vue-custom-keyboard-demo and show case below.

Show case

About

A Vue.js component for custom keyboard. (vue自定义键盘组件/车牌号键盘组件)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 73.5%
  • Vue 25.5%
  • HTML 1.0%