uniapp中的uview组件库丰富的Keyboard 键盘 用法

<template>
  <view>
    <u-keyboard ref="uKeyboard" mode="car" :show="show"></u-keyboard>
    <u-button @click="show = true">打开</u-button>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        show: false
      }
    }
  }
</script>

<u-keyboard mode="number" :dotDisabled="true"></u-keyboard>

<u-keyboard ref="uKeyboard" mode="number" :random="true" :show="show"></u-keyboard>

<template>
  <u-keyboard mode="number" :show="show"></u-keyboard>
</template>
<script>
  export default {
    onReady() {
      // 如果想一进入页面就打开键盘，请在此生命周期调用
      this.show = true;
    },
    onLoad() {
      // 不应在此调用，因为此时u-keyboard组件尚未创建完成
      // this.show = true;
    }
  }
</script>

<template>
  <u-keyboard mode="number" @change="valChange" @backspace="backspace" :show="show"></u-keyboard>
</template>
<script>
  export default {
    data() {
      return {
        value: '',
        show: false
      }
    },
    methods: {
      // 按键被点击(点击退格键不会触发此事件)
      valChange(val) {
        // 将每次按键的值拼接到value变量中，注意+=写法
        this.value += val;
        console.log(this.value);
      },
      // 退格键被点击
      backspace() {
        // 删除value的最后一个字符
        if(this.value.length) this.value = this.value.substr(0, this.value.length - 1);
        console.log(this.value);
      }
    }
  }
</script>