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 --saveThen, 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.