How to use it? - Githubissues

freshlySqueezedBananas commented 6 years ago

I can't figure how you use the keyboard nor how you bind it to the inputs. May you please clarify? Ty

relzhong commented 6 years ago

We use it as virtual-keyboard for user input in our kiosk mechine. You can use it as vue component. `<Keyboard debug :options="{usePreview: false, stickyShift: false }"

` And you can find option config in this doc

thukuwanjiku commented 5 years ago

@relzhong I can't get it to work too. I installed it and imported in app.js

Then I'm using it this way

<VueVirtualKeyboard
        debug
        v-model="amountTransacted"
        :options="keyboardOptions"
></VueVirtualKeyboard>

with options defined as

keyboardOptions: {
                    type:"input",
                    layout: "qwerty",
                    alwaysOpen: true,
                    usePreview: false,
                    useWheel: false,
                    stickyShift: false,
                    appendLocally: true,
                    color: "light",
                    updateOnChange: true,
                    initialFocus: true,
                    display: {
                        "accept" : "Save"
                    }
                }

Yet I'm getting this warning with nothing rendering

relzhong commented 5 years ago

I use in my page as component, this is my code in production. hope it can help.

<keyboard
                  :options="keyboardOption"
                  class="ui-keyboard-case"
                  v-model="pym"
                ></keyboard>

import { Keyboard } from 'vue-virtual-keyboard/dist/vue-virtual-keyboard';

    keyboardOption: {
        usePreview: false,
        stickyShift: false,
        autoAccept: true,
        language: 'zh',
        display: {
          accept: '确认',
          bksp: '删除',
          cancel: '取消',
          enter: '回车',
        },
      },

  .ui-keyboard-case {
    font-size: 40px;
    text-align: center;
      /* background: #fefefe; */
    border: 1px solid #ffe3e2;
    padding: 4px;
    width: 38%;
    height: auto;
    margin-right: 5%;
    /* left: 25%; */
    /* top: auto;
    bottom: 0px; */
    /* position: fixed; */

  }

relzhong / vue-virtual-keyboard

How to use it? #1