Tuniao UI Uniapp V3TnKeyboard-软键盘
软键盘一般用于需要输入指定内容，例如：密码、手机号、验证码、身份证、车牌号码等
组件位置
typescript
import TnKeyboard from '@tuniao/tnui-vue3-uniapp/components/keyboard/src/keyboard.vue'import TnKeyboard from '@tuniao/tnui-vue3-uniapp/components/keyboard/src/keyboard.vue'typescript
import TnKeyboard from '@/uni_modules/tuniaoui-vue3/components/keyboard/src/keyboard.vue'import TnKeyboard from '@/uni_modules/tuniaoui-vue3/components/keyboard/src/keyboard.vue'平台差异说明
| App(vue) | H5 | 微信小程序 | 支付宝小程序 | ... |
|---|---|---|---|---|
| √ | √ | √ | √ | 适配中 |
基础使用
- 通过
v-model绑定键盘输入的值 - 通过
v-model:show或者show可以控制键盘的显示和隐藏 - 通过
disabled属性可以禁用键盘，禁用键盘后之后删除和确认按钮可以正常使用，其他按钮均为禁止状态
vue
<script lang="ts" setup>
import { ref } from 'vue'
const keyboardValue = ref('')
const showKeyboard = ref(false)
const openKeyboard = () => {
showKeyboard.value = true
}
</script>
<template>
<TnButton type="primary" @click="openKeyboard">打开键盘</TnButton>
<TnKeyboard v-model="keyboardValue" v-model:show="showKeyboard" />
</template><script lang="ts" setup>
import { ref } from 'vue'
const keyboardValue = ref('')
const showKeyboard = ref(false)
const openKeyboard = () => {
showKeyboard.value = true
}
</script>
<template>
<TnButton type="primary" @click="openKeyboard">打开键盘</TnButton>
<TnKeyboard v-model="keyboardValue" v-model:show="showKeyboard" />
</template>禁用键盘
vue
<template>
<TnKeyboard v-model="keyboardValue" v-model:show="showKeyboard" disabled />
</template><template>
<TnKeyboard v-model="keyboardValue" v-model:show="showKeyboard" disabled />
</template>软键盘类型
可以通过mode属性修改软键盘的类型，有效值为number、digit、random、idcard、car，默认为number
数字键盘-number
在该键盘下，只能输入数字，不包含小数点
vue
<template>
<TnKeyboard
v-model="keyboardValue"
v-model:show="showKeyboard"
mode="number"
/>
</template><template>
<TnKeyboard
v-model="keyboardValue"
v-model:show="showKeyboard"
mode="number"
/>
</template>数字键盘-digit
在该键盘下，可以输入数字和小数点
vue
<template>
<TnKeyboard
v-model="keyboardValue"
v-model:show="showKeyboard"
mode="digit"
/>
</template><template>
<TnKeyboard
v-model="keyboardValue"
v-model:show="showKeyboard"
mode="digit"
/>
</template>随机键盘-random
在该键盘下，可以输入数字不包含小数点，此时键盘上的数字为随机排列
vue
<template>
<TnKeyboard
v-model="keyboardValue"
v-model:show="showKeyboard"
mode="random"
/>
</template><template>
<TnKeyboard
v-model="keyboardValue"
v-model:show="showKeyboard"
mode="random"
/>
</template>身份证键盘-idcard
在该键盘下，可以输入数字和 X 字母
vue
<template>
<TnKeyboard
v-model="keyboardValue"
v-model:show="showKeyboard"
mode="idcard"
/>
</template><template>
<TnKeyboard
v-model="keyboardValue"
v-model:show="showKeyboard"
mode="idcard"
/>
</template>车牌号键盘-car
在改键盘下可以通过v-model:car-lang属性修改当前输入的是省份还是车牌号，有效值为cn、en，默认为cn
vue
<template>
<TnKeyboard
v-model="keyboardValue"
v-model:show="showKeyboard"
v-model:car-lang="carLang"
mode="car"
/>
</template><template>
<TnKeyboard
v-model="keyboardValue"
v-model:show="showKeyboard"
v-model:car-lang="carLang"
mode="car"
/>
</template>API
Props
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| v-model / model-value | 键盘输入绑定的值 | String | - | - |
| v-model:show / show | 是否显示键盘 | Boolean | false | true |
| disabled | 禁止键盘输入 | Boolean | false | true |
| mode | 键盘类型，详细说明可以参照上面 | String | number | digit \ idcard \ random \ car |
| car-lang | 车牌键盘中/英文模式，在 mode 为 car 时生效 | String | cn | en |
| vibrate | 点击按钮是否有震动效果 | Boolean | true | false |
| long-press-delete | 是否允许长按删除删除内容 | Boolean | true | false |
| overlay-closeable | 点击遮罩关闭键盘 | Boolean | true | false |
| z-index | zIndex | Number | 20075 | - |
Event
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 键盘输入发生变化 | (value: string) => void |
| close | 键盘关闭事件 | () => void |
| backspace | 点击删除按钮触发 | () => void |
| confirm | 点击确认按钮触发 | () => void |