shop-wx/doc/wot-design-uni/docs/component/keyboard.md

version
1.3.10

Keyboard 虚拟键盘

虚拟数字键盘，用于输入数字、密码、身份证或车牌号等场景。

基本用法

可以通过 v-model:visible 控制键盘是否展示。

<wd-cell title="默认键盘" is-link @click="showKeyBoard" />

<wd-keyboard v-model:visible="visible" @input="onInput" @delete="onDelete"></wd-keyboard>

const { show: showToast } = useToast()
const visible = ref<boolean>(false)

function showKeyBoard() {
  visible.value = true
}

const onInput = (value) => showToast(`${value}`)
const onDelete = () => showToast('删除')

带右侧栏的键盘

将 mode 属性设置为 custom 来展示键盘的右侧栏，常用于输入金额的场景。

<wd-cell title="带右侧栏的键盘" is-link @click="showKeyBoard" />

<wd-keyboard v-model:visible="visible" mode="custom" extra-key="." close-text="完成" @input="onInput" @delete="onDelete"></wd-keyboard>

const { show: showToast } = useToast()
const visible = ref<boolean>(false)

function showKeyBoard() {
  visible.value = true
}

const onInput = (value) => showToast(`${value}`)
const onDelete = () => showToast('删除')

身份证键盘

通过 extra-key 属性可以设置左下角按键内容，比如需要输入身份证号时，可以将 extra-key 设置为 X。

<wd-cell title="身份证键盘" is-link @click="showKeyBoard" />

<wd-keyboard v-model:visible="visible" extra-key="X" close-text="完成" @input="onInput" @delete="onDelete" />

const { show: showToast } = useToast()
const visible = ref<boolean>(false)

function showKeyBoard() {
  visible.value = true
}

const onInput = (value) => showToast(`${value}`)
const onDelete = () => showToast('删除')

车牌号键盘

将 mode 属性设置为 car 来展示车牌号键盘，常用于输入车牌号的场景。

<wd-cell title="车牌号键盘" is-link @click="showKeyBoard" />

<wd-keyboard v-model:visible="visible" mode="car" @input="onInput" @delete="onDelete"></wd-keyboard>

const { show: showToast } = useToast()
const visible = ref<boolean>(false)

function showKeyBoard() {
  visible.value = true
}

const onInput = (value) => showToast(`${value}`)
const onDelete = () => showToast('删除')

车牌号键盘语言控制

通过 car-lang 属性可以控制车牌键盘的语言模式，支持中文省份（zh）和英文字母（en）。通过 auto-switch-lang 属性可以控制是否自动切换语言。

<!-- 受控模式：手动控制语言切换 -->
<wd-cell title="车牌号键盘（受控）" :value="value" is-link @click="showKeyBoard" />

<wd-keyboard v-model="value" v-model:visible="visible" v-model:car-lang="lang" mode="car" @input="onInput" @delete="onDelete"></wd-keyboard>

<!-- 非受控模式：禁用自动切换 -->
<wd-cell title="车牌号键盘（非受控）" :value="value2" is-link @click="showKeyBoard2" />

<wd-keyboard v-model="value2" v-model:visible="visible2" mode="car" auto-switch-lang @input="onInput" @delete="onDelete"></wd-keyboard>

const { show: showToast } = useToast()
const visible = ref<boolean>(false)
const visible2 = ref<boolean>(false)
const value = ref<string>('')
const value2 = ref<string>('')
const lang = ref<'zh' | 'en'>('zh')

function showKeyBoard() {
  visible.value = true
}

function showKeyBoard2() {
  visible2.value = true
}

const onInput = (value) => showToast(`${value}`)
const onDelete = () => showToast('删除')

带标题的键盘

通过 title 属性可以设置键盘标题。

<wd-cell title="带标题的键盘" is-link @click="showKeyBoard" />

<wd-keyboard v-model:visible="visible" title="输入密码" extra-key="." close-text="完成" @input="onInput" @delete="onDelete" />

const { show: showToast } = useToast()
const visible = ref<boolean>(false)

function showKeyBoard() {
  visible.value = true
}

const onInput = (value) => showToast(`${value}`)
const onDelete = () => showToast('删除')

使用 slot 自定义标题

<wd-cell title="使用 slot 自定义标题" is-link @click="showKeyBoard" />

<wd-keyboard v-model:visible="visible" extra-key="." close-text="完成" @input="onInput" @delete="onDelete">
  <template #title>
    <text style="color: red">自定义标题</text>
  </template>
</wd-keyboard>

const { show: showToast } = useToast()
const visible = ref<boolean>(false)

function showKeyBoard() {
  visible.value = true
}

const onInput = (value) => showToast(`${value}`)
const onDelete = () => showToast('删除')

多个额外按键

当 mode 为 custom 时，支持以数组的形式配置两个 extra-key。

<wd-cell title="多个额外按键" is-link @click="showKeyBoard" />

<wd-keyboard v-model:visible="visible" mode="custom" :extra-key="['00', '.']" close-text="完成" @input="onInput" @delete="onDelete" />

const { show: showToast } = useToast()
const visible = ref<boolean>(false)

function showKeyBoard() {
  visible.value = true
}

const onInput = (value) => showToast(`${value}`)
const onDelete = () => showToast('删除')

随机数字键盘

通过 random-key-order 属性可以随机排序数字键盘，常用于安全等级较高的场景。

<wd-cell title="随机数字键盘" is-link @click="showKeyBoard" />

<wd-keyboard v-model:visible="visible" random-key-order @input="onInput" @delete="onDelete" />

const { show: showToast } = useToast()
const visible = ref<boolean>(false)

function showKeyBoard() {
  visible.value = true
}

const onInput = (value) => showToast(`${value}`)
const onDelete = () => showToast('删除')

双向绑定

可以通过 v-model 绑定键盘当前输入值，并通过 maxlength 属性来限制输入长度。

<wd-cell title="双向绑定" :value="value1" is-link @click="showKeyBoard" />
<wd-keyboard
  v-model="value1"
  :maxlength="6"
  v-model:visible="visible"
  title="键盘标题"
  extra-key="."
  close-text="完成"
  @input="onInput"
  @delete="onDelete"
></wd-keyboard>

const { show: showToast } = useToast()
const visible = ref<boolean>(false)
const value1 = ref<string>('')

function showKeyBoard() {
  visible.value = true
}

const onInput = (value) => showToast(`${value}`)
const onDelete = () => showToast('删除')

展示蒙层遮罩

hideOnClickOutside控制键盘弹窗是否有遮罩，通过modal控制遮罩是否为透明。

::: tip 提示 当前modal仅控制遮罩是否为透明，hideOnClickOutside控制弹窗是否有遮罩，当存在遮罩时，点击遮罩就可以关闭键盘，但是键盘展开时必须点击遮罩关闭当前键盘后才可以再点击别的按钮。也可以关闭hideOnClickOutside，手动控制键盘是否展示来实现点击外部时收起键盘，这样更灵活。 :::

<wd-cell title="双向绑定" :value="value1" is-link @click="showKeyBoard" />
<wd-keyboard :modal="true" :hide-on-click-outside="true" v-model:visible="visible" @input="onInput" @delete="onDelete" />

const { show: showToast } = useToast()
const visible = ref<boolean>(false)
const value1 = ref<string>('')

function showKeyBoard() {
  visible.value = true
}

const onInput = (value) => showToast(`${value}`)
const onDelete = () => showToast('删除')

Attributes

参数	说明	类型	可选值	默认值	最低版本
v-model:visible	是否展开	boolean	-	false	1.3.10
v-model	绑定的值	string	-	-	1.3.10
title	标题	string	-	-	1.3.10
mode	键盘模式	string	default, car, custom	default	1.3.10
zIndex	层级	number	-	100	1.3.10
maxlength	最大长度	number	-	Infinity	1.3.10
showDeleteKey	是否显示删除键	boolean	-	true	1.3.10
randomKeyOrder	是否随机键盘按键顺序	boolean	-	false	1.3.10
closeText	确认按钮文本	string	-	-	1.3.10
deleteText	删除按钮文本	string	-	-	1.3.10
closeButtonLoading	关闭按钮是否显示加载状态	boolean	-	false	1.3.10
modal	是否显示蒙层遮罩	boolean	-	false	1.3.10
hideOnClickOutside	是否在点击外部时收起键盘	boolean	-	true	1.3.10
lockScroll	是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动	boolean	-	true	1.3.10
safeAreaInsetBottom	是否在底部安全区域内	boolean	-	true	1.3.10
extraKey	额外按键	string / string[]	-	-	1.3.10
root-portal	是否从页面中脱离出来，用于解决各种 fixed 失效问题	boolean	-	false	1.11.0
v-model:carLang	车牌键盘语言模式，当 mode=car 时生效	string	zh, en	-	1.13.0
autoSwitchLang	是否自动切换车牌键盘语言，当 mode=car 且 car-lang 是非受控状态时生效	boolean	-	false	1.13.0

Slot

name	说明	类型	最低版本
title	标题	-	1.2.12

Events

事件名称	说明	参数	最低版本
input	点击按键时触发	key: string	-
delete	点击删除键时触发	-	-
close	点击关闭按钮或非键盘区域时触发	-	-

外部样式类

类名	说明	最低版本
custom-class	根节点样式类	1.3.10
custom-style	根节点样式	1.3.10