admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: ✨ 新增Keyboard虚拟键盘支持车牌号输入 (#567)

Browse Source 
* feat: ✨ Keyboard 虚拟键盘支持输入车牌号(#351)

* docs: ✏️ 虚拟键盘支持车牌号输入
This commit is contained in:
RYGRIT 2024-09-06 13:37:36 +08:00 committed by GitHub
parent feb64ea7be
commit 59df1b7ce5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 1037 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/.vitepress/config.mts
View File

@ -368,6 +368,9 @@ export default defineConfig({
}, {
link: "/component/count-to",
text: "CountTo 数字滚动"
}, {
link: "/component/keyboard",
text: "Keyboard 虚拟键盘"
}, {
link: "/component/number-keyboard",
text: "NumberKeyboard 数字键盘"

282
docs/component/keyboard.md Normal file
View File

@ -0,0 +1,282 @@
<frame/>
# Keyboard 虚拟键盘
虚拟数字键盘，用于输入数字、密码、身份证或车牌号等场景。
## 基本用法
可以通过 `v-model:visible` 控制键盘是否展示。
```html
<wd-cell title="默认键盘" is-link @click="showKeyBoard" />
<wd-keyboard v-model:visible="visible" @input="onInput" @delete="onDelete"></wd-keyboard>
```
```ts
const { show: showToast } = useToast()
const visible = ref<boolean>(false)
function showKeyBoard() {
visible.value = true
}
const onInput = (value) => showToast(`${value}`)
const onDelete = () => showToast('删除')
```
## 带右侧栏的键盘
将 `mode` 属性设置为 `custom` 来展示键盘的右侧栏，常用于输入金额的场景。
```html
<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>
```
```ts
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`。
```html
<wd-cell title="身份证键盘" is-link @click="showKeyBoard" />
<wd-keyboard v-model:visible="visible" extra-key="X" close-text="完成" @input="onInput" @delete="onDelete" />
```
```ts
const { show: showToast } = useToast()
const visible = ref<boolean>(false)
function showKeyBoard() {
visible.value = true
}
const onInput = (value) => showToast(`${value}`)
const onDelete = () => showToast('删除')
```
## 车牌号键盘
将 `mode` 属性设置为 `car` 来展示车牌号键盘，常用于输入车牌号的场景。
```html
<wd-cell title="车牌号键盘" is-link @click="showKeyBoard" />
<wd-keyboard v-model:visible="visible" mode="car" @input="onInput" @delete="onDelete"></wd-keyboard>
```
```ts
const { show: showToast } = useToast()
const visible = ref<boolean>(false)
function showKeyBoard() {
visible.value = true
}
const onInput = (value) => showToast(`${value}`)
const onDelete = () => showToast('删除')
```
## 带标题的键盘
通过 `title` 属性可以设置键盘标题。
```html
<wd-cell title="带标题的键盘" is-link @click="showKeyBoard" />
<wd-keyboard v-model:visible="visible" title="输入密码" extra-key="." close-text="完成" @input="onInput" @delete="onDelete" />
```
```ts
const { show: showToast } = useToast()
const visible = ref<boolean>(false)
function showKeyBoard() {
visible.value = true
}
const onInput = (value) => showToast(`${value}`)
const onDelete = () => showToast('删除')
```
## 使用 slot 自定义标题
```html
<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>
```
```ts
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`。
```html
<wd-cell title="多个额外按键" is-link @click="showKeyBoard" />
<wd-keyboard v-model:visible="visible" mode="custom" :extra-key="['00', '.']" close-text="完成" @input="onInput" @delete="onDelete" />
```
```ts
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` 属性可以随机排序数字键盘，常用于安全等级较高的场景。
```html
<wd-cell title="随机数字键盘" is-link @click="showKeyBoard" />
<wd-keyboard v-model:visible="visible" random-key-order @input="onInput" @delete="onDelete" />
```
```ts
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` 属性来限制输入长度。
```html
<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>
```
```ts
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`，手动控制键盘是否展示来实现点击外部时收起键盘，这样更灵活。
:::
```html
<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" />
```
```ts
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` | 0.1.65 |
| v-model | 绑定的值 | `string` | - | - | 0.1.65 |
| title | 标题 | `string` | - | - | 0.1.65 |
| mode | 键盘模式 | `string` | `default`, `car`, `custom` | `default` | $LOWEST_VERSION$ |
| zIndex | 层级 | `number` | - | `100` | 0.1.65 |
| maxlength | 最大长度 | `number` | - | `Infinity` | 0.1.65 |
| showDeleteKey | 是否显示删除键 | `boolean` | - | `true` | 0.1.65 |
| randomKeyOrder | 是否随机键盘按键顺序 | `boolean` | - | `false` | 0.1.65 |
| closeText | 确认按钮文本 | `string` | - | - | 0.1.65 |
| deleteText | 删除按钮文本 | `string` | - | - | 0.1.65 |
| closeButtonLoading | 关闭按钮是否显示加载状态 | `boolean` | - | `false` | 0.1.65 |
| modal | 是否显示蒙层遮罩 | `boolean` | - | `false` | 0.1.65 |
| hideOnClickOutside | 是否在点击外部时收起键盘 | `boolean` | - | `true` | 0.1.65 |
| lockScroll | 是否锁定滚动 | `boolean` | - | `true` | 0.1.65 |
| safeAreaInsetBottom | 是否在底部安全区域内 | `boolean` | - | `true` | 0.1.65 |
| extraKey | 额外按键 | `string` / `string[]` | - | - | 0.1.65 |
## Slot
| name | 说明 | 类型 | 最低版本 |
| ----- | ---- | ---- | -------- |
| title | 标题 | - | 1.2.12 |
## Events
| 事件名称 | 说明 | 参数 | 最低版本 |
| -------- | ------------------------------ | ----------- | -------- |
| input | 点击按键时触发 | key: string | - |
| delete | 点击删除键时触发 | - | - |
| close | 点击关闭按钮或非键盘区域时触发 | - | - |
## 外部样式类
| 类名 | 说明 | 最低版本 |
| ------------ | ------------ | -------- |
| custom-class | 根节点样式类 | 0.1.65 |
| custom-style | 根节点样式 | 0.1.65 |

14
src/pages.json
View File

@ -1,5 +1,6 @@
{
"pages": [{
"pages": [
{
"path": "pages/index/Index",
"name": "index",
"style": {
@ -194,7 +195,6 @@
"path": "pages/notify/Index",
"name": "toast",
"style": {
"mp-alipay": {
"allowsBounceVertical": "NO"
},
@ -762,6 +762,16 @@
"navigationBarTitleText": "CountTo 数字滚动"
}
},
{
"path": "pages/keyboard/Index",
"name": "keyboard",
"style": {
"mp-alipay": {
"allowsBounceVertical": "NO"
},
"navigationBarTitleText": "Keyboard 虚拟键盘"
}
},
{
"path": "pages/numberKeyboard/Index",
"name": "numberKeyboard",

4
src/pages/index/Index.vue
View File

@ -290,6 +290,10 @@ const list = ref([
id: 'countTo',
name: 'CountTo 数字滚动'
},
{
id: 'keyboard',
name: 'Keyboard 虚拟键盘'
},
{
id: 'numberKeyboard',
name: 'NumberKeyboard 数字键盘'

76
src/pages/keyboard/Index.vue Normal file
View File

@ -0,0 +1,76 @@
<template>
<wd-toast></wd-toast>
<page-wraper>
<demo-block title="基本用法" transparent>
<wd-cell-group border>
<wd-cell title="默认键盘" is-link @click="showKeyBoard(1)" />
<wd-cell title="带右侧栏的键盘" is-link @click="showKeyBoard(2)" />
<wd-cell title="身份证键盘" is-link @click="showKeyBoard(3)" />
<wd-cell title="带标题的键盘" is-link @click="showKeyBoard(4)" />
<wd-cell title="slot自定义标题" is-link @click="showKeyBoard(9)" />
<wd-cell title="多个额外按键" is-link @click="showKeyBoard(5)" />
<wd-cell title="随机数字键盘" is-link @click="showKeyBoard(6)" />
<wd-cell title="车牌号键盘" is-link @click="showKeyBoard(10)" />
<wd-cell title="双向绑定" clickable :value="value1" @click="showKeyBoard(7)" />
<wd-cell title="展示蒙层" clickable @click="showKeyBoard(8)" />
</wd-cell-group>
</demo-block>
<wd-keyboard v-model:visible="visible1" @input="onInput" @delete="onDelete"></wd-keyboard>
<wd-keyboard v-model:visible="visible2" mode="custom" extra-key="." close-text="完成" @input="onInput" @delete="onDelete"></wd-keyboard>
<wd-keyboard v-model:visible="visible3" extra-key="X" close-text="完成" @input="onInput" @delete="onDelete" />
<wd-keyboard v-model:visible="visible4" title="输入密码" extra-key="." close-text="完成" @input="onInput" @delete="onDelete"></wd-keyboard>
<wd-keyboard v-model:visible="visible9" extra-key="." close-text="完成" @input="onInput" @delete="onDelete">
<template #title>
<text style="color: red">自定义标题</text>
</template>
</wd-keyboard>
<wd-keyboard v-model:visible="visible5" mode="custom" :extra-key="['00', '.']" close-text="完成" @input="onInput" @delete="onDelete" />
<wd-keyboard v-model:visible="visible6" random-key-order @input="onInput" @delete="onDelete" />
<wd-keyboard
v-model="value1"
:maxlength="6"
v-model:visible="visible7"
title="键盘标题"
extra-key="."
close-text="完成"
@input="onInput"
@delete="onDelete"
></wd-keyboard>
<wd-keyboard :modal="true" v-model:visible="visible8" @input="onInput" @delete="onDelete" />
<wd-keyboard v-model:visible="visible10" mode="car" @input="onInput" @delete="onDelete" />
</page-wraper>
</template>
<script lang="ts" setup>
import { useToast } from '@/uni_modules/wot-design-uni'
import { ref } from 'vue'
const { show: showToast } = useToast()
const visible1 = ref<boolean>(false)
const visible2 = ref<boolean>(false)
const visible3 = ref<boolean>(false)
const visible4 = ref<boolean>(false)
const visible5 = ref<boolean>(false)
const visible6 = ref<boolean>(false)
const visible7 = ref<boolean>(false)
const visible8 = ref<boolean>(false)
const visible9 = ref<boolean>(false)
const visible10 = ref<boolean>(false)
const visibleArr = [visible1, visible2, visible3, visible4, visible5, visible6, visible7, visible8, visible9, visible10]
const value1 = ref<string>('')
function showKeyBoard(index: number) {
visibleArr.forEach((item, i) => (i === index - 1 ? (item.value = true) : (item.value = false)))
}
const onInput = (value: string) => showToast(`${value}`)
const onDelete = () => showToast('删除')
</script>
<style lang="scss" scoped></style>

89
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
View File

@ -37,8 +37,6 @@ $-font-white-2: var(--wot-font-white-2, rgba(255, 255, 255, 0.55));
$-font-white-3: var(--wot-font-white-3, rgba(255, 255, 255, 0.35));
$-font-white-4: var(--wot-font-white-4, rgba(255, 255, 255, 0.22));
/* 文字颜色（默认浅色背景下 */
$-color-title: var(--wot-color-title, $-color-black) !default; // 模块标题/重要正文 000
$-color-content: var(--wot-color-content, #262626) !default; // 普通正文 262626
@ -68,7 +66,6 @@ $-color-icon: var(--wot-color-icon, #d9d9d9) !default; // icon颜色
$-color-icon-active: var(--wot-color-icon-active, #eee) !default; // icon颜色hover
$-color-icon-disabled: var(--wot-color-icon-disabled, #a7a7a7) !default; // icon颜色disabled
/*----------------------------------------- Theme color. end -------------------------------------------*/
/*-------------------------------- Theme color application size. start --------------------------------*/
@ -172,7 +169,7 @@ $-button-success-bg-color: var(--wot-button-success-bg-color, $-color-success) !
$-button-success-box-shadow-color: var(--wot-button-success-box-shadow-color, rgba($-color-success, 0.25)) !default; // 主要按钮阴影颜色
$-button-info-color: var(--wot-button-info-color, $-color-title) !default; // 信息按钮颜色
$-button-info-bg-color: var(--wot-button-info-bg-color, #F0F0F0) !default; // 信息按钮背景颜色
$-button-info-bg-color: var(--wot-button-info-bg-color, #f0f0f0) !default; // 信息按钮背景颜色
$-button-info-plain-border-color: var(--wot-button-info-plain-border-color, rgba(0, 0, 0, 0.45)) !default; // 信息按钮禁用颜色
$-button-info-plain-normal-color: var(--wot-button-info-plain-normal-color, rgba(0, 0, 0, 0.85)) !default; // 信息幽灵按钮默认颜色
@ -186,7 +183,6 @@ $-button-error-box-shadow-color: var(--wot-button-error-box-shadow-color, rgba($
$-button-text-hover-opacity: var(--wot-button-text-hover-opacity, 0.7) !default; // 文字button激活时透明度
/* cell */
$-cell-padding: var(--wot-cell-padding, $-size-side-padding) !default; // cell 左右padding距离
$-cell-line-height: var(--wot-cell-line-height, 24px) !default; // 行高
@ -379,8 +375,6 @@ $-loadmore-error-color: var(--wot-loadmore-error-color, $-color-theme) !default;
$-loadmore-refresh-fs: var(--wot-loadmore-refresh-fs, $-fs-title) !default; // refresh图标字号
$-loadmore-loading-size: var(--wot-loadmore-loading-size, $-fs-title) !default; // loading尺寸
/* message-box */
$-message-box-width: var(--wot-message-box-width, 300px) !default; // 宽度
$-message-box-bg: var(--wot-message-box-bg, $-color-white) !default; // 默认背景颜色
@ -427,7 +421,6 @@ $-pagination-nav-sepatator-padding: var(--wot-pagination-nav-sepatator-padding,
$-pagination-nav-current-color: var(--wot-pagination-nav-current-color, $-color-theme) !default;
$-pagination-icon-size: var(--wot-pagination-icon-size, $-fs-content) !default;
/* picker */
$-picker-toolbar-height: var(--wot-picker-toolbar-height, 54px) !default; // toolbar 操作条的高度
$-picker-action-height: var(--wot-picker-action-height, 16px) !default; // toolbar 操作条的高度
@ -446,7 +439,8 @@ $-picker-loading-button-color: var(--wot-picker-loading-button-color, rgba(0, 0,
$-picker-column-padding: var(--wot-picker-column-padding, 0 $-size-side-padding) !default; // 选项内间距
$-picker-column-disabled-color: var(--wot-picker-column-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 选择器选项禁用的颜色
$-picker-mask: var(--wot-picker-mask, linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.25)), ) linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.25)) !default; // 上下阴影
$-picker-mask: var(--wot-picker-mask, linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.25)))
linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.25)) !default; // 上下阴影
$-picker-loading-bg: var(--wot-picker-loading-bg, rgba($-color-white, 0.8)) !default; // loading 背景颜色
$-picker-region-separator-color: var(--wot-picker-region-separator-color, rgba(0, 0, 0, 0.65)) !default; // 区域选择文字颜色
$-picker-cell-arrow-size-large: var(--wot-picker-cell-arrow-size-large, $-cell-icon-size) !default; // cell 类型的大尺寸 右侧icon尺寸
@ -464,7 +458,10 @@ $-col-picker-selected-color: var(--wot-col-picker-selected-color, rgba(0, 0, 0,
$-col-picker-selected-fw: var(--wot-col-picker-selected-fw, 700) !default; // 弹框顶部值高亮字重
$-col-picker-line-width: var(--wot-col-picker-line-width, 16px) !default; // 弹框顶部值高亮线条宽度
$-col-picker-line-height: var(--wot-col-picker-line-height, 3px) !default; // 弹框顶部值高亮线条高度
$-col-picker-line-color: var(--wot-col-picker-line-color, linear-gradient(315deg, rgba(81, 124, 240, 1), rgba(118, 158, 245, 1))) !default; // 弹框顶部值高亮线条颜色
$-col-picker-line-color: var(
--wot-col-picker-line-color,
linear-gradient(315deg, rgba(81, 124, 240, 1), rgba(118, 158, 245, 1))
) !default; // 弹框顶部值高亮线条颜色
$-col-picker-line-box-shadow: var(--wot-col-picker-line-box-shadow, 0px 1px 2px 0px rgba(1, 87, 255, 0.2)) !default; // 弹框顶部值高亮线条阴影
$-col-picker-list-height: var(--wot-col-picker-list-height, 53vh) !default; // 弹框列表高度
$-col-picker-list-padding-bottom: var(--wot-col-picker-list-padding-bottom, 30px) !default; // 弹框列表底部间距
@ -490,9 +487,15 @@ $-progress-padding: var(--wot-progress-padding, 9px 0 8px) !default; // 进度
$-progress-bg: var(--wot-progress-bg, rgba(229, 229, 229, 1)) !default; // 进度条底色
$-progress-danger-color: var(--wot-progress-danger-color, $-color-danger) !default; // 进度条danger颜色
$-progress-success-color: var(--wot-progress-success-color, $-color-success) !default; // 进度条success进度条颜色
$-progress-color: var(--wot-progress-color, resultColor(315deg, $-color-theme, "dark""light", #517CF0 #769EF5, 0% 100%)) !default; // 进度条渐变色
$-progress-linear-success-color: var(--wot-progress-linear-success-color, resultColor(315deg, $-color-theme, "dark""light", #20B080 #2BD69D, 0% 100%)) !default; // success进度条渐变色
$-progress-linear-danger-color: var(--wot-progress-linear-danger-color, resultColor(315deg, $-color-theme, "dark""light", #E04350 #FF5964, 0% 100%)) !default; // danger进度条渐变色
$-progress-color: var(--wot-progress-color, resultColor(315deg, $-color-theme, 'dark' 'light', #517cf0 #769ef5, 0% 100%)) !default; // 进度条渐变色
$-progress-linear-success-color: var(
--wot-progress-linear-success-color,
resultColor(315deg, $-color-theme, 'dark' 'light', #20b080 #2bd69d, 0% 100%)
) !default; // success进度条渐变色
$-progress-linear-danger-color: var(
--wot-progress-linear-danger-color,
resultColor(315deg, $-color-theme, 'dark' 'light', #e04350 #ff5964, 0% 100%)
) !default; // danger进度条渐变色
$-progress-height: var(--wot-progress-height, 3px) !default; // 进度条高度
$-progress-label-color: var(--wot-progress-label-color, #333) !default; // 文字颜色
$-progress-label-fs: var(--wot-progress-label-fs, 14px) !default; // 文字字号
@ -550,11 +553,14 @@ $-search-light-bg: var(--wot-search-light-bg, $-color-bg) !default; // light 类
/* slider */
$-slider-fs: var(--wot-slider-fs, $-fs-content) !default; // 字体大小
$-slider-handle-radius: var(--wot-slider-handle-radius, 12px) !default; // 滑块半径
$-slider-handle-bg: var(--wot-slider-handle-bg, resultColor(139deg, $-color-theme, "dark""light", #FFFFFF #F7F7F7, 0% 100%)) !default; // 滑块背景
$-slider-handle-bg: var(--wot-slider-handle-bg, resultColor(139deg, $-color-theme, 'dark' 'light', #ffffff #f7f7f7, 0% 100%)) !default; // 滑块背景
$-slider-axie-height: var(--wot-slider-axie-height, 3px) !default; // 滑轴高度
$-slider-color: var(--wot-slider-color, #333) !default; // 字体颜色
$-slider-axie-bg: var(--wot-slider-axie-bg, #E5E5E5) !default; // 滑轴的默认背景色
$-slider-line-color: var(--wot-slider-line-color, resultColor(315deg, $-color-theme, "dark""light", #517CF0 #769EF5, 0% 100%)) !default; // 进度条颜色
$-slider-axie-bg: var(--wot-slider-axie-bg, #e5e5e5) !default; // 滑轴的默认背景色
$-slider-line-color: var(
--wot-slider-line-color,
resultColor(315deg, $-color-theme, 'dark' 'light', #517cf0 #769ef5, 0% 100%)
) !default; // 进度条颜色
$-slider-disabled-color: var(--wot-slider-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 禁用状态下字体颜色
/* sort-button */
@ -587,10 +593,9 @@ $-switch-circle-size: var(--wot-switch-circle-size, 1em) !default; // 圆点大
$-switch-border-color: var(--wot-switch-border-color, #e5e5e5) !default; // 边框颜色选中状态背景颜色
$-switch-active-color: var(--wot-switch-active-color, $-color-theme) !default; // 选中状态背景
$-switch-active-shadow-color: var(--wot-switch-active-shadow-color, rgba(0, 83, 162, 0.5)) !default; // 选中状态shadow颜色
$-switch-inactive-color: var(--wot-switch-inactive-color, #EAEAEA) !default; // 非选中背景颜色
$-switch-inactive-color: var(--wot-switch-inactive-color, #eaeaea) !default; // 非选中背景颜色
$-switch-inactive-shadow-color: var(--wot-switch-inactive-shadow-color, rgba(155, 155, 155, 0.5)) !default; // 非选中状态shadow颜色
/* tabs */
$-tabs-nav-arrow-fs: var(--wot-tabs-nav-arrow-fs, 18px) !default; // 全部Icon字号
$-tabs-nav-arrow-open-fs: var(--wot-tabs-nav-arrow-open-fs, 14px) !default; // 展开Icon字号
@ -607,7 +612,10 @@ $-tabs-nav-line-bg-color: var(--wot-tabs-nav-line-bg-color, $-color-theme) !defa
$-tabs-nav-map-fs: var(--wot-tabs-nav-map-fs, $-fs-content) !default; // map 类型按钮字号
$-tabs-nav-map-color: var(--wot-tabs-nav-map-color, rgba(0, 0, 0, 0.85)) !default; // map 类型按钮文字颜色
$-tabs-nav-map-arrow-color: var(--wot-tabs-nav-map-arrow-color, rgba(0, 0, 0, 0.65)) !default; // map 类型箭头颜色
$-tabs-nav-map-btn-before-bg: var(--wot-tabs-nav-map-btn-before-bg, linear-gradient(270deg, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 0) 100%)) !default; // 左侧map遮罩阴影
$-tabs-nav-map-btn-before-bg: var(
--wot-tabs-nav-map-btn-before-bg,
linear-gradient(270deg, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 0) 100%)
) !default; // 左侧map遮罩阴影
$-tabs-nav-map-button-back-color: var(--wot-tabs-nav-map-button-back-color, rgba(0, 0, 0, 0.04)) !default; // map 类型按钮边框颜色
$-tabs-nav-map-button-radius: var(--wot-tabs-nav-map-button-radius, 16px) !default; // map 类型按钮圆角大小
$-tabs-nav-map-modal-bg: var(--wot-tabs-nav-map-modal-bg, $-overlay-bg) !default; // map 类型蒙层背景色
@ -621,7 +629,7 @@ $-tag-primary-color: var(--wot-tag-primary-color, $-color-theme) !default; //
$-tag-danger-color: var(--wot-tag-danger-color, $-color-danger) !default; // danger 颜色
$-tag-warning-color: var(--wot-tag-warning-color, $-color-warning) !default; // warning 颜色
$-tag-success-color: var(--wot-tag-success-color, $-color-success) !default; // success 颜色
$-tag-info-bg: var(--wot-tag-info-bg, resultColor(49deg, $-color-black, "dark""light", #808080 #999999, 0% 100%)) !default; // info 背景颜色
$-tag-info-bg: var(--wot-tag-info-bg, resultColor(49deg, $-color-black, 'dark' 'light', #808080 #999999, 0% 100%)) !default; // info 背景颜色
$-tag-primary-bg: var(--wot-tag-primary-bg, $-color-theme) !default; // 主背景颜色
$-tag-danger-bg: var(--wot-tag-danger-bg, $-color-danger) !default; // danger 背景颜色
$-tag-warning-bg: var(--wot-tag-warning-bg, $-color-warning) !default; // warning 背景颜色
@ -723,7 +731,6 @@ $-upload-preview-name-bg: var(--wot-upload-preview-name-bg, rgba(0, 0, 0, 0.6))
$-upload-preview-name-height: var(--wot-upload-preview-name-height, 22px) !default; // 预览文件名背景高度
$-upload-cover-icon-size: var(--wot-upload-cover-icon-size, 22px) !default; // 视频/文件图标尺寸
/* curtain */
$-curtain-content-radius: var(--wot-curtain-content-radius, 24px) !default; // 内容圆角
$-curtain-content-close-color: var(--wot-curtain-content-close-color, $-color-white) !default; // 关闭按钮颜色
@ -758,7 +765,6 @@ $-circle-text-color: var(--wot-circle-text-color, $-color-content) !default; //
$-swiper-radius: var(--wot-swiper-radius, 8px);
$-swiper-item-padding: var(--wot-swiper-item-padding, 0);
/* swiper-nav */
// dot & dots-bar
$-swiper-nav-dot-color: var(--wot-swiper-nav-dot-color, $-font-white-2) !default;
@ -779,12 +785,17 @@ $-swiper-nav-btn-size: var(--wot-swiper-nav-btn-size, 48rpx) !default;
$-segmented-padding: var(--wot-segmented-padding, 4px) !default; // 分段器padding
$-segmented-item-bg-color: var(--wot-segmented-item-bg-color, #eeeeee) !default;
$-segmented-item-color: var(--wot-segmented-item-color, rgba(0, 0, 0, 0.85)) !default; // 标题文字颜色
$-segmented-item-acitve-bg: var(--wot-segmented-item-acitve-bg, #FFFFFF) !default; // 标题文字颜色
$-segmented-item-acitve-bg: var(--wot-segmented-item-acitve-bg, #ffffff) !default; // 标题文字颜色
$-segmented-item-disabled-color: var(--wot-segmented-item-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 标题文字禁用颜色
/* tabbar */
$-tabbar-height: var(--wot-tabbar-height, 50px) !default;
$-tabbar-box-shadow: var(--wot-tabbar-box-shadow, 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08)) !default; // round类型tabbar阴影
$-tabbar-box-shadow: var(
--wot-tabbar-box-shadow,
0 6px 30px 5px rgba(0, 0, 0, 0.05),
0 16px 24px 2px rgba(0, 0, 0, 0.04),
0 8px 10px -5px rgba(0, 0, 0, 0.08)
) !default; // round类型tabbar阴影
/* tabbar-item */
$-tabbar-item-title-font-size: var(--wot-tabbar-item-title-font-size, 10px) !default; // tabbar选项文字大小
@ -793,8 +804,6 @@ $-tabbar-inactive-color: var(--wot-tabbar-inactive-color, $-color-title) !defaul
$-tabbar-active-color: var(--wot-tabbar-active-color, $-color-theme) !default; // 选中文字和图标颜色
$-tabbar-item-icon-size: var(--wot-tabbar-item-icon-size, 20px) !default; // tabbar选项图标大小
/* navbar */
$-navbar-height: var(--wot-navbar-height, 44px) !default; // navbar高度
$-navbar-color: var(--wot-navbar-color, $-font-gray-1) !default; // navbar字体颜色
@ -805,7 +814,7 @@ $-navbar-desc-font-color: var(--wot-navbar-desc-font-color, $-font-gray-1) !defa
$-navbar-title-font-size: var(--wot-navbar-title-font-size, 18px); // navbar title字体大小
$-navbar-title-font-weight: var(--wot-navbar-title-font-weight, 600); // navbar title字重
$-navbar-disabled-opacity: var(--wot-navbar-disabled-opacity, 0.6) !default; // navbar左右两侧字体禁用
$-navbar-hover-color :var(--wot-navbar-hover-color, #eee) !default; // navbar hover样式
$-navbar-hover-color: var(--wot-navbar-hover-color, #eee) !default; // navbar hover样式
/* navbar-capsule */
$-navbar-capsule-border-color: var(--wot-navbar-capsule-border-color, #e7e7e7) !default;
@ -814,11 +823,9 @@ $-navbar-capsule-width: var(--wot-navbar-capsule-width, 88px) !default;
$-navbar-capsule-height: var(--wot-navbar-capsule-height, 32px) !default;
$-navbar-capsule-icon-size: var(--wot-navbar-capsule-icon-size, 20px) !default; // navbar capsule图标大小
/* table */
$-table-color: var(--wot-table-color, $-font-gray-1) !default; // 表格字体颜色
$-table-bg: var(--wot-table-bg, #FFFFFF) !default; // 表格背景颜色
$-table-bg: var(--wot-table-bg, #ffffff) !default; // 表格背景颜色
$-table-stripe-bg: var(--wot-table-stripe-bg, #f3f3f3) !default; // 表格背景颜色
$-table-border-color: var(--wot-table-border-color, #ececec) !default; // 表格边框颜色
$-table-font-size: var(--wot-table-font-size, 13px) !default; // 表格字体大小
@ -853,6 +860,25 @@ $-count-down-text-color: var(--wot-count-down-text-color, $-color-gray-8) !defau
$-count-down-font-size: var(--wot-count-down-font-size, $-fs-content) !default;
$-count-down-line-height: var(--wot-count-down-line-height, 20px) !default;
/* keyboard */
$-keyboard-key-height: var(--wot-keyboard-key-height, 48px) !default;
$-keyboard-key-font-size: var(--wot-keyboard-key-font-size, 28px) !default;
$-keyboard-key-background: var(--wot-keyboard-key-background, $-color-white) !default;
$-keyboard-key-border-radius: var(--wot-keyboard-key-border-radius, 8px) !default;
$-keyboard-delete-font-size: var(--wot-keyboard-delete-font-size, 16px) !default;
$-keyboard-key-active-color: var(--wot-keyboard-key-active-color, $-color-gray-3) !default;
$-keyboard-button-text-color: var(--wot-keyboard-button-text-color, $-color-white) !default;
$-keyboard-button-background: var(--wot-keyboard--button-background, $-color-theme) !default;
$-keyboard-button-active-opacity: var(--wot-keyboard-button-active-opacity, 0.6) !default;
$-keyboard-background: var(--wot-keyboard-background, $-color-gray-2) !default;
$-keyboard-title-height: var(--wot-keyboard-title-height, 34px) !default;
$-keyboard-title-color: var(--wot-keyboard-title-color, $-color-gray-7) !default;
$-keyboard-title-font-size: var(--wot-keyboard-title-font-size, 16px) !default;
$-keyboard-close-padding: var(--wot-keyboard-title-font-size, 0 16px) !default;
$-keyboard-close-color: var(--wot-keyboard-close-color, $-color-theme) !default;
$-keyboard-close-font-size: var(--wot-keyboard-close-font-size, 14px) !default;
$-keyboard-icon-size: var(--wot-keyboard-icon-size, 22px) !default;
/* number-keyboard */
$-number-keyboard-key-height: var(--wot-number-keyboard-key-height, 48px) !default;
$-number-keyboard-key-font-size: var(--wot-number-keyboard-key-font-size, 28px) !default;
@ -872,7 +898,6 @@ $-number-keyboard-close-color: var(--wot-number-keyboard-close-color, $-color-th
$-number-keyboard-close-font-size: var(--wot-number-keyboard-close-font-size, 14px) !default;
$-number-keyboard-icon-size: var(--wot-number-keyboard-icon-size, 22px) !default;
/* passwod-input */
$-password-input-height: var(--wot-password-input-height, 50px);
$-password-input-margin: var(--wot-password-input-margin, 16px);
@ -917,4 +942,4 @@ $-video-preview-close-font-size: var(--wot-video-preview-close-font-size, 20px)
/* img-cropper */
$-img-cropper-icon-size: var(--wot-img-cropper-icon-size, $-fs-big) !default; // 图标大小
$-img-cropper-icon-color: var(--wot-img-cropper-icon-color, #fff) !default; // 图标颜色
$-img-cropper-icon-color: var(--wot-img-cropper-icon-color, #fff) !default; // 图标颜色

83
src/uni_modules/wot-design-uni/components/wd-keyboard/constants.ts Normal file
View File

@ -0,0 +1,83 @@
/**
* 车牌号键盘-省份简称
*/
export const CAR_KEYBOARD_AREAS = [
'京',
'沪',
'粤',
'津',
'冀',
'豫',
'云',
'辽',
'黑',
'湘',
'皖',
'鲁',
'苏',
'浙',
'赣',
'鄂',
'桂',
'甘',
'晋',
'陕',
'蒙',
'吉',
'闽',
'贵',
'渝',
'川',
'青',
'琼',
'宁',
'挂',
'藏',
'港',
'澳',
'新',
'使',
'学'
]
/**
* 车牌号键盘-数字和字母
*/
export const CAR_KEYBOARD_KEYS = [
1,
2,
3,
4,
5,
6,
7,
8,
9,
0,
'Q',
'W',
'E',
'R',
'T',
'Y',
'U',
'I',
'O',
'P',
'A',
'S',
'D',
'F',
'G',
'H',
'J',
'K',
'L',
'Z',
'X',
'C',
'V',
'B',
'N',
'M'
]

102
src/uni_modules/wot-design-uni/components/wd-keyboard/index.scss Normal file
View File

@ -0,0 +1,102 @@
@import './../common/abstracts/_mixin.scss';
@import './../common/abstracts/variable.scss';
.wot-theme-dark {
@include b(keyboard) {
background: $-dark-background5;
@include e(header) {
color: $-dark-color;
}
}
}
@include b(keyboard) {
width: 100%;
background: $-keyboard-background;
color: $-color-black;
user-select: none;
@include m(with-title) {
border-radius: 20px 20px 0 0;
}
@include e(header) {
position: relative;
display: flex;
align-items: center;
justify-content: center;
box-sizing: content-box;
height: $-keyboard-title-height;
padding-top: 6px;
color: $-keyboard-title-color;
font-size: $-keyboard-title-font-size;
}
@include e(title) {
display: inline-block;
font-weight: normal;
&-left {
position: absolute;
left: 0;
}
}
@include e(body) {
display: flex;
padding: 6px 0 0 6px;
}
@include e(keys) {
display: flex;
flex: 3;
flex-wrap: wrap;
}
&-car {
@include e(body) {
display: flex;
padding: 6px 0 0 6px;
}
}
&-car {
@include e(keys) {
display: flex;
flex: 10;
flex-wrap: wrap;
.wd-key-wrapper {
--wot-keyboard-key-font-size: 18px;
flex-basis: 10%;
@include m(wider) {
flex-basis: 20%;
}
}
}
}
@include e(close) {
position: absolute;
display: flex;
align-items: center;
right: 0;
height: 100%;
padding: $-keyboard-close-padding;
color: $-keyboard-close-color;
font-size: $-keyboard-close-font-size;
background-color: transparent;
border: none;
@include m(hover) {
opacity: 0.6;
}
}
@include e(sidebar) {
display: flex;
flex: 1;
flex-direction: column;
}
}

79
src/uni_modules/wot-design-uni/components/wd-keyboard/key/index.scss Normal file
View File

@ -0,0 +1,79 @@
@import './../../common/abstracts/_mixin.scss';
@import './../../common/abstracts/variable.scss';
.wot-theme-dark {
@include b(key) {
background: $-dark-background2;
color: $-dark-color;
&:active {
background-color: $-dark-background4;
}
@include m(active) {
background-color: $-dark-background4;
}
}
}
.wd-key-wrapper {
position: relative;
flex: 1;
flex-basis: 33%;
box-sizing: border-box;
padding: 0 6px 6px 0;
@include m(wider) {
flex-basis: 66%;
}
}
@include b(key) {
display: flex;
align-items: center;
justify-content: center;
height: $-keyboard-key-height;
font-size: $-keyboard-key-font-size;
line-height: 1.5;
background: $-keyboard-key-background;
border-radius: $-keyboard-key-border-radius;
&:active {
background-color: $-keyboard-key-active-color;
}
@include m(large) {
position: absolute;
top: 0;
right: 6px;
bottom: 6px;
left: 0;
height: auto;
}
@include m(delete, close) {
font-size: $-keyboard-delete-font-size;
}
@include m(active) {
background-color: $-keyboard-key-active-color;
}
@include m(close) {
color: $-keyboard-button-text-color;
background: $-keyboard-button-background;
&:active {
background: $-keyboard-button-background;
opacity: $-keyboard-button-active-opacity;
}
}
@include edeep(loading-icon) {
color: $-keyboard-button-text-color;
}
@include edeep(icon) {
font-size: $-keyboard-icon-size;
}
}

71
src/uni_modules/wot-design-uni/components/wd-keyboard/key/index.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<view :class="`wd-key-wrapper ${wider ? 'wd-key-wrapper--wider' : ''}`" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
<view :class="keyClass">
<wd-loading custom-class="wd-key__loading-icon" v-if="props.loading" />
<template v-if="type === 'delete'">
<template v-if="text">
{{ text }}
</template>
<wd-icon v-else custom-class="wd-key__icon" name="keyboard-delete" size="22px"></wd-icon>
</template>
<template v-else-if="type === 'extra'">
<template v-if="text">
{{ text }}
</template>
<wd-icon v-else custom-class="wd-key__icon" name="keyboard-collapse" size="22px"></wd-icon>
</template>
<template v-else>{{ text }}</template>
</view>
</view>
</template>
<script lang="ts">
export default {
name: 'wd-key',
options: {
virtualHost: true,
addGlobalClass: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { useTouch } from '../../composables/useTouch'
import { keyProps } from './types'
const props = defineProps(keyProps)
const emit = defineEmits(['press'])
const touch = useTouch()
const active = ref<boolean>(false)
const keyClass = computed(() => {
return `wd-key ${props.large ? 'wd-key--large' : ''} ${props.type === 'delete' ? 'wd-key--delete' : ''} ${
props.type === 'close' ? 'wd-key--close' : ''
}`
})
function onTouchStart(event: TouchEvent) {
touch.touchStart(event)
active.value = true
}
function onTouchMove(event: TouchEvent) {
touch.touchMove(event)
if (touch.direction.value) {
active.value = false
}
}
function onTouchEnd() {
if (active.value) {
active.value = false
emit('press', props.text, props.type)
}
}
</script>
<style lang="scss">
@import './index.scss';
</style>

11
src/uni_modules/wot-design-uni/components/wd-keyboard/key/types.ts Normal file
View File

@ -0,0 +1,11 @@
import { makeBooleanProp, makeNumericProp, makeStringProp } from '../../common/props'
export type NumberKeyType = '' | 'delete' | 'extra' | 'close'
export const keyProps = {
type: makeStringProp<NumberKeyType>(''),
text: makeNumericProp(''),
wider: makeBooleanProp(false),
large: makeBooleanProp(false),
loading: makeBooleanProp(false)
}

79
src/uni_modules/wot-design-uni/components/wd-keyboard/types.ts Normal file
View File

@ -0,0 +1,79 @@
import type { PropType } from 'vue'
import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
export type KeyboardMode = 'default' | 'custom' | 'car'
export type KeyType = '' | 'delete' | 'extra' | 'close'
export interface Key {
text?: number | string // key文本
type?: KeyType // key的类型
wider?: boolean // 是否占2个key的宽度
}
export const keyboardProps = {
...baseProps,
/**
* 是否可见
*/
visible: makeBooleanProp(false),
/**
* 绑定的值
*/
modelValue: makeStringProp(''),
/**
* 标题
*/
title: String,
/**
* 键盘模式
*/
mode: makeStringProp<KeyboardMode>('default'),
/**
* 层级
*/
zIndex: makeNumberProp(100),
/**
* 最大长度
*/
maxlength: makeNumberProp(Infinity),
/**
* 是否显示删除键
*/
showDeleteKey: makeBooleanProp(true),
/**
* 是否随机键盘按键顺序
*/
randomKeyOrder: makeBooleanProp(false),
/**
* 确认按钮文本
*/
closeText: String,
/**
* 删除按钮文本
*/
deleteText: String,
/**
* 关闭按钮是否显示加载状态
*/
closeButtonLoading: makeBooleanProp(false),
/**
* 是否显示蒙层
*/
modal: makeBooleanProp(false),
/**
* 是否在点击外部时收起键盘
*/
hideOnClickOutside: makeBooleanProp(true),
/**
* 是否锁定滚动
*/
lockScroll: makeBooleanProp(true),
/**
* 是否在底部安全区域内
*/
safeAreaInsetBottom: makeBooleanProp(true),
/**
* 额外按键
*/
extraKey: [String, Array] as PropType<string | Array<string>>
}

178
src/uni_modules/wot-design-uni/components/wd-keyboard/wd-keyboard.vue Normal file
View File

@ -0,0 +1,178 @@
<template>
<wd-popup
v-model="show"
position="bottom"
:z-index="zIndex"
:safe-area-inset-bottom="safeAreaInsetBottom"
:modal-style="modal ? '' : 'opacity: 0;'"
:modal="hideOnClickOutside"
:lockScroll="lockScroll"
@click-modal="handleClose"
>
<view :class="`wd-keyboard ${customClass}`" :style="customStyle">
<view class="wd-keyboard__header" v-if="showTitle">
<slot name="title">
<text class="wd-keyboard__title">{{ title }}</text>
</slot>
<view class="wd-keyboard__close" hover-class="wd-keyboard__close--hover" v-if="showClose" @click="handleClose">
<text>{{ closeText }}</text>
</view>
</view>
<template v-if="mode !== 'car'">
<view class="wd-keyboard__body">
<view class="wd-keyboard__keys">
<wd-key v-for="key in keys" :key="key.text" :text="key.text" :type="key.type" :wider="key.wider" @press="handlePress"></wd-key>
</view>
<view class="wd-keyboard__sidebar" v-if="mode === 'custom'">
<wd-key v-if="showDeleteKey" large :text="deleteText" type="delete" @press="handlePress"></wd-key>
<wd-key large :text="closeText" type="close" :loading="closeButtonLoading" @press="handlePress"></wd-key>
</view>
</view>
</template>
<template v-if="mode === 'car'">
<view class="wd-keyboard-car__body">
<view class="wd-keyboard-car__keys">
<wd-key v-for="key in keys" :key="key.text" :text="key.text" :type="key.type" :wider="key.wider" @press="handlePress"></wd-key>
</view>
</view>
</template>
</view>
</wd-popup>
</template>
<script lang="ts">
export default {
name: 'wd-keyboard',
options: {
virtualHost: true,
addGlobalClass: true,
styleIsolation: 'shared'
}
}
</script>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import WdKey from './key/index.vue'
import { keyboardProps, type Key } from './types'
import type { NumberKeyType } from './key/types'
import { CAR_KEYBOARD_AREAS, CAR_KEYBOARD_KEYS } from './constants'
const props = defineProps(keyboardProps)
const emit = defineEmits(['update:visible', 'input', 'close', 'delete', 'update:modelValue'])
const show = ref(props.visible)
watch(
() => props.visible,
(newValue) => {
show.value = newValue
}
)
const carKeyboardLang = ref('zh')
const keys = computed(() => (props.mode !== 'car' ? (props.mode === 'custom' ? genCustomKeys() : genDefaultKeys()) : genCarKeys()))
const showClose = computed(() => {
return props.closeText && (props.mode === 'default' || props.mode === 'car')
})
const showTitle = computed(() => {
return props.title || showClose.value
})
/**
* 随机打乱数组的顺序
* @param arr 要打乱顺序的数组
* @returns 打乱顺序后的数组
*/
function shuffleArray<T>(arr: T[]): T[] {
const newArr = [...arr]
for (let i = newArr.length - 1; i > 0; i--) {
// 生成一个随机索引 j，范围是 [0, i]
const j = Math.floor(Math.random() * (i + 1))
// 交换索引 i 和 j 处的元素
;[newArr[i], newArr[j]] = [newArr[j], newArr[i]]
}
return newArr
}
function genBasicKeys(): Key[] {
const keys = Array.from({ length: 9 }, (_, i) => ({ text: i + 1 }))
// 如果需要随机顺序，则调用 shuffleArray 方法打乱数组顺序
return props.randomKeyOrder ? shuffleArray(keys) : keys
}
function genDefaultKeys(): Key[] {
return [
...genBasicKeys(),
{ text: props.extraKey as string, type: 'extra' },
{ text: 0 },
{
// 根据条件是否显示删除键的文本和类型
text: props.showDeleteKey ? props.deleteText : '',
type: props.showDeleteKey ? 'delete' : ''
}
]
}
function genCustomKeys(): Key[] {
const keys = genBasicKeys()
const extraKeys = Array.isArray(props.extraKey) ? props.extraKey : [props.extraKey]
if (extraKeys.length === 1) {
// 如果只有一个额外按键，则添加一个宽度较大的数字0和一个额外按键
keys.push({ text: 0, wider: true }, { text: extraKeys[0], type: 'extra' })
} else if (extraKeys.length === 2) {
// 如果有两个额外按键，则添加两个额外按键和一个数字0
keys.push({ text: extraKeys[0], type: 'extra' }, { text: 0 }, { text: extraKeys[1], type: 'extra' })
}
return keys
}
// 生成车牌键盘
function genCarKeys(): Array<Key> {
const [keys, remainKeys] = splitCarKeys()
return [
...keys,
{ text: carKeyboardLang.value === 'zh' ? 'ABC' : '返回', type: 'extra', wider: true },
...remainKeys,
{ text: props.deleteText, type: 'delete', wider: true }
]
}
function splitCarKeys(): Array<Array<Key>> {
const keys = carKeyboardLang.value === 'zh' ? CAR_KEYBOARD_AREAS.map((key) => ({ text: key })) : CAR_KEYBOARD_KEYS.map((key) => ({ text: key }))
return [keys.slice(0, 30), keys.slice(30)]
}
const handleClose = () => {
emit('close')
emit('update:visible', false)
}
const handlePress = (text: string, type: NumberKeyType) => {
if (type === 'extra') {
if (text === '') {
return handleClose()
} else if (text === 'ABC' || text === '返回') {
carKeyboardLang.value = carKeyboardLang.value === 'zh' ? 'en' : 'zh'
return
}
}
const value = props.modelValue
if (type === 'delete') {
emit('delete')
emit('update:modelValue', value.slice(0, value.length - 1))
} else if (type === 'close') {
handleClose()
} else if (value.length < +props.maxlength) {
emit('input', text)
emit('update:modelValue', value + text)
}
}
</script>
<style lang="scss">
@import './index.scss';
</style>