Vue Focus Keyboard

A keyboard component for Vue. Start to write immediately. No input element definition. Plug and play!- Demo

Installation and usage

Install the Vue Focus Keyboard component for your project

npm install vue-focus-keyboard --save

Then, add component into your app

import FocusKeyboard from 'vue-focus-keyboard';

Vue.use(FocusKeyboard)

Use HTML template

<FocusKeyboard></FocusKeyboard>

Props

theme

There are 2 theme in Vue Focus Keyboard. They are dark and light (default: dark). You can use one of them with theme prop.

<FocusKeyboard :theme="light"></FocusKeyboard>

keyboardWidth

Also, you can set keyboard's width.

<FocusKeyboard :keyboardWidth="50%"></FocusKeyboard>

keyboard

You don't like current keyboards? Well, set your custom keyboard layout. You can view default layouts in src/layout.js file

export default {
  data () {
    return {
      customLayout: {
        default: [
          // Normal layout
        ],
        shifted: [
          // Layout when press shift button
        ],
        capsed: [
          // Layout when press capslock button
        ],
        alted: [
          // Layout when press alt button
        ],
        shifted_capsed: [
          // Layout when press shift + capslock button
        ],
        shifted_alted: [
          // Layout when press shift + alt button
        ]
      },
    }
  }
}

Then, set your keyboard.

<FocusKeyboard :keyboard="customLayout"></FocusKeyboard>

License

MIT.