Keyboard 键盘

mView自定义键盘，包含英文键盘，身份证键盘，数字键盘3中模式，都有可以打乱按键顺序的选项。

平台差异说明

App(vue)	App(nvue)	H5	小程序
√	×	√	√

基本使用

通过mode参数定义键盘的类型，show绑定一个值为布尔值的变量控制键盘的弹出与收起：

mode = '' (默认值)为英文键盘，此时顶部工具条中间的提示文字为"英文键盘"
mode = number为数字键盘，此时顶部工具条中间的提示文字为"数字键盘"
mode = card 为身份证键盘，此时顶部工具条中间的提示文字为"身份证键盘"

<template>
    <view>
        <m-common title="键盘" />
        <m-cell-group border>
            <m-cell
                title="基本使用"
                is-link
                @click="handleClick"
            />
        </m-cell-group>
        <m-keyboard
            :show="show"
            mode="number"
            @close="show = false"
            @cancel="show = false"
            @confirm="show = false"
        />
    </view>
</template>

<script lang="ts" setup>
import {ref} from 'vue'

const show = ref(false)

const handleClick = () => {
    show.value = true
}
</script>

<style>

</style>

隐藏键盘"."符号

通过dotDisabled参数配置是否显示键盘"."符号，默认为false，只在"mode = number"时生效

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

是否打乱按键的顺序

如果配置random参数为true的话，每次打开键盘，按键的顺序都是随机的，该功能默认是关闭的

如何控制键盘的打开和关闭？

需要默认就打开键盘，这事你设置show为true的时期很有考究，请在onReady生命周期里设置show.value = true避免m-keyboard组件尚未创建完成。

如何监听键盘按键被点击？

输入值是通过组件的change事件实现的，组件内部每个按键被点击的时候，组件就会发出一个change事件，回调参数为点击的按键的值。
通过backspace事件监听键盘退格键的点击，通过修改父组件的值实现退格的效果，见下方示例

注意：点击退格键(也即删除键)不会触发change事件

<template>
    <m-keyboard @change="change" @backspace="backspace"/>
</template>

<script lang="ts" setup>
import {ref} from 'vue'

const value = ref('')

const change = val => {
    // 将每次按键的值拼接到value变量中，注意+=写法
    value.value += val
}

const backspace = () => {
    // 删除value的最后一个字符
    if (value.value.length) value.value = value.value.substr(0, value.value.length - 1)
}
</script>

API

Props

参数	说明	类型	默认值	可选值
show	控制键盘的弹出与收起	Boolean	false	true
vibrate	是否启动点击震动，`h5`不支持，兼容性查看open in new window。	Boolean	false	true
mode	键盘类型，默认英文键盘	String	-	number \| card
dotDisabled	是否显示"."按键，只在mode=number时有效	Boolean	false	true
tooltip	是否显示键盘顶部工具条	Boolean	true	false
showTips	是否显示工具条中间的提示	Boolean	true	false
tips	工具条中间的提示文字，见上方`基本使用`的说明	String	-	-
showCancel	是否显示工具条左边的"取消"按钮	Boolean	true	false
showConfirm	是否显示工具条右边的"完成"按钮	Boolean	true	false
cancelText	取消按钮的文字	String	取消	-
confirmText	确认按钮的文字	String	确定	-
random	是否打乱键盘按键的顺序	Boolean	false	true
safeAreaInsetBottom	是否开启底部安全区适配	Boolean	false	true
closeOnClickOverlay	是否允许点击遮罩收起键盘（注意：关闭事件需要自行处理，只会在开启closeOnClickOverlay后点击遮罩层执行close回调）	Boolean	true	false
overlay	是否显示遮罩	Boolean	true	false
zIndex	弹出键盘的`z-index`值	Number \| String	10075	-

Slot

名称	说明
default	内容将会显示键盘的工具条上面

Event

事件名	说明	回调参数
change	按键被点击(不包含退格键被点击)	按键的值
close	键盘关闭	-
confirm	键盘顶部工具条右边的"确定"按钮被点击	-
cancel	键盘顶部工具条左边的"取消"按钮被点击	-
backspace	键盘退格键被点击	-

# Keyboard 键盘

# 平台差异说明

# 基本使用

# 隐藏键盘"."符号

# 是否打乱按键的顺序

# 如何控制键盘的打开和关闭？

# 如何监听键盘按键被点击？

# API

# Props

# Slot

# Event