vue-keyboard-wg
v2.0.0
Published
vue2 component,change vue-keyboard component
Downloads
8
Maintainers
Readme
vue-keyboard-wg
A virtual keyboard for Vue 2.
Install:
$ npm install --save vue-keyboard-wg
Usage:
<Keyboard layouts="abc123|xyz456|{space:space}"></Keyboard>
Each layout accepts a pipe |
delimited string of characters to use as the keyboard buttons. You can include special function characters with the {text:action}
syntax, where text
is the text that will be rendered in the button and action
is the action within the keyboard component to be called when that button is pressed. The inbuilt actions are:
backspace
- Remove one character from the end of the current value.space
- Insert one whitespace character.clear
- Clear the entire input value.goto:n
- Go to a new keyboard layout, replacingn
with the index of the layout to load.
If the action
does not match any of these inbuilt actions, an event will be dispatched by the keyboard component instead, using the action name as the event name. The keyboard component will be provided to the listener as the first argument.
Note: You can simply use
{action}
which will create a button with no text content. This is useful for things likespace
which you may just want to render as a wide empty button.
Props:
Example:
Here is an example application containing a keyboard
component:
JavaScript:
import Vue from 'vue';
import Keyboard from 'vue-keyboard-wg';
new Vue({
el: '#app',
components: { Keyboard },
data: {
input: '',
},
methods: {
changed(value) {
console.log('Value ' + value);
},
custom(keyboard) {
console.log(keyboard.value);
}
}
});
Markup:
<keyboard
v-model="input"
@custom="custom"
@input="changed"
:layouts="[
'1234567890{delete:backspace}|qwertyuiop|asdfghjkl|{shift:goto:1}zxcvbnm|{space:space}{custom:custom}',
'!@#$%^&*(){delete:backspace}|QWERTYUIOP|ASDFGHJKL|{shift:goto:0}ZXCVBNM|{space:space}{custom:custom}'
]"
:maxlength="16"
></keyboard>
This keeps the input
value in the main application in sync with the value of the keyboard, limits that value to 16 characters and triggers the 'custom' function in the main application when the "custom" button in the keyboard is clicked.
add layouts default value "['qwertyuiop|asdfghjkl|{upper}zxcvbnm{backspace}|{123:goto:1}{space:space}.{Go:custom}','1234567890|!@#$\"&*()|?^/[]:;%{backspace}|{ABC:goto:0}{space:space}.{custom:custom}']"
add iconfont {backspace} ==> iconfont {upper} ==> iconfont