2017-08-06

前回の続き。
vue-touch-keyboardでカスタムキーボードを作るには、ソースコードのlayouts.jsを見ればわかります。
特にシフトキーやCapsキー用のレイアウトが必要ない場合は_metaとdefaultを定義すればOKです。
defaultは表示通りの入力で良い場合は単にその文字、特殊キーは{}で括ったうえで_metaに定義を記載します。

key: 入力文字列
text: 表示文字列
classes: DOMのclass
width: DOMのwidth
func: 押下時に実行される関数名

funcは任意の関数名が使えるわけではなく、ソースのkeyboard.vueのpropsで定義されている以下のもののみです。
[onClickイベント発生時]

accept: 確定
cancel: キャンセル
next: フォーカス移動

[onChangeイベント発生時]

change: 変更

また、func: "backspace"は特殊で、

vue-touch-keyboard内部のbackspace関数の実行のみ：外部関数は呼び出せない
DOMのbackground-imageとして自動的に"✕"画像が表示

という動作をします。したがってbackspaceキーの表示を変えるにはtextを設定してもダメでCSSでスタイルを上書き定義する必要があります。

.vue-touch-keyboard .keyboard .key.backspace.nobackground {
  background-image: none;
  &:after {
    content: "BS";
  }
}

以上を踏まえて、一般的なテンキーを"tenkey"レイアウトとして再現してみたものがこれです。
比較のためビルトインの"numeric"レイアウトと並べてあります。

      // custom keyboard layouts
      layouts: {
        "tenkey": {
          _meta: {
            "backspace": { func: "backspace", classes: "control nobackground"},
            "accept": { func: "accept", text: "Enter", classes: "control featured"},
            "next": { func: "next", text: "Tab", classes: "control featured"}
          },

          default: [
            "{next} / * {backspace}",
            "1 2 3 -",
            "4 5 6 +",
            "7 8 9 =",
            "0 00 . {accept}"
          ]
        }
      }