Question

import { Keyboard } from 'feui';
components: {
  [Keyboard.name]: Keyboard
},
data() {
  return {
    showKeyboard1: false,
    showKeyboard2: false
  }
},
methods:{
  onInput(val){
    console.log(val);
  },
  onDelect(val) {
    console.log(val);
  }
}

代码演示

普通键盘

<fe-button :gradients="['#1D62F0', '#19D5FD']" 
  @click.native='showKeyboard1 = !showKeyboard1' >
  打开普通键盘
</fe-button>
<fe-keyboard :show="showKeyboard1" extra-key='.' 
  @input="onInput" @delete="onDelete" 
  @blur="showKeyboard1 = false">
</fe-keyboard>

自定义键盘

<fe-button :gradients="['#0D2633', '#007FBF']" 
  @click.native='showKeyboard2 = !showKeyboard2' >
  打开自定义键盘
</fe-button>
<fe-keyboard :show="showKeyboard2" extra-key='X' 
  theme='custom' @input="onInput" close-button-text="完成/确定" 
  @delete="onDelete" @blur="showKeyboard2 = false">
</fe-keyboard>

API

参数	说明	类型	默认值	可选值
show	是否显示键盘	Boolean	false	false,true
title	键盘标题	String		-
extra-key	额外按键内容	String		-
theme	主题	String	default	custom,default
z-index	键盘的z-index值	Number	100	-
transition	是否有过场动画	Boolean	true	false,true
close-button-text	关闭/确定按钮文字，空不显示	String		-
show-delete-key	是否显示关闭键	Boolean	true	false,true
hide-on-click-outside	点击外部时是否收起键盘	Boolean	true	false,true
-	-	-	-	-

Events

事件名	参数	说明	备注
input	val	点击按键时触发	参数为按键内容
delete	-	点击删除时触发	-
blur	-	点击非键盘区域时触发	-
show	-	键盘显示时触发	-
hide	-	键盘隐藏时触发	-
-	-	-	-