fix: 🐛 修复NumberKeyboard组件使用 title 插槽未传入关闭文本时不展示头部的问题 (#1060)

 Closes: #760
This commit is contained in:
不如摸鱼去 2025-05-18 22:06:15 +08:00 committed by GitHub
parent f1ad2fa05e
commit 875e072b3e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 26 additions and 9 deletions

View File

@ -2,6 +2,10 @@
虚拟数字键盘,用于输入数字、密码或身份证等场景。
:::danger 注意⚠️
虚拟数字键盘功能已移动至[KeyBoard](./keyboard)组件中,请及时迁移,本组件于`1.10`版本废弃。
:::
## 基本用法
可以通过 `v-model:visible` 控制键盘是否展示。

View File

@ -2,6 +2,10 @@
Virtual numeric keyboard, used for inputting numbers, passwords, or ID cards and other scenarios.
:::danger Warning⚠
The virtual numeric keyboard functionality has been moved to the [KeyBoard](./keyboard) component. Please migrate as soon as possible. This component will be deprecated in version `1.10`.
:::
## Basic Usage
You can control whether the keyboard is displayed through `v-model:visible`.

View File

@ -10,8 +10,8 @@
@click-modal="handleClose"
>
<view :class="`wd-keyboard ${customClass}`" :style="customStyle">
<view class="wd-keyboard__header" v-if="showTitle || $slots.title">
<slot name="title">
<view class="wd-keyboard__header" v-if="showHeader">
<slot name="title" v-if="showTitle">
<text class="wd-keyboard__title">{{ title }}</text>
</slot>
<view class="wd-keyboard__close" hover-class="wd-keyboard__close--hover" v-if="showClose" @click="handleClose">
@ -51,7 +51,7 @@ export default {
</script>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { computed, ref, watch, useSlots } from 'vue'
import wdPopup from '../wd-popup/wd-popup.vue'
import WdKey from './key/index.vue'
import { keyboardProps, type Key } from './types'
@ -60,6 +60,7 @@ import { CAR_KEYBOARD_AREAS, CAR_KEYBOARD_KEYS } from './constants'
const props = defineProps(keyboardProps)
const emit = defineEmits(['update:visible', 'input', 'close', 'delete', 'update:modelValue'])
const slots = useSlots()
const show = ref(props.visible)
watch(
@ -77,7 +78,11 @@ const showClose = computed(() => {
})
const showTitle = computed(() => {
return props.title || showClose.value
return !!props.title || !!slots.title
})
const showHeader = computed(() => {
return showTitle.value || showClose.value
})
/**

View File

@ -10,8 +10,8 @@
@click-modal="handleClose"
>
<view :class="`wd-number-keyboard ${customClass}`" :style="customStyle">
<view class="wd-number-keyboard__header" v-if="showTitle">
<slot name="title">
<view class="wd-number-keyboard__header" v-if="showHeader">
<slot name="title" v-if="showTitle">
<text class="wd-number-keyboard__title">{{ title }}</text>
</slot>
<view class="wd-number-keyboard__close" hover-class="wd-number-keyboard__close--hover" v-if="showClose" @click="handleClose">
@ -43,14 +43,14 @@ export default {
<script lang="ts" setup>
import wdPopup from '../wd-popup/wd-popup.vue'
import { computed, ref, watch } from 'vue'
import { computed, ref, useSlots, watch } from 'vue'
import WdKey from './key/index.vue'
import { numberKeyboardProps, type Key } from './types'
import type { NumberKeyType } from './key/types'
const props = defineProps(numberKeyboardProps)
const emit = defineEmits(['update:visible', 'input', 'close', 'delete', 'update:modelValue'])
const slots = useSlots()
const show = ref(props.visible)
watch(
() => props.visible,
@ -66,7 +66,11 @@ const showClose = computed(() => {
})
const showTitle = computed(() => {
return props.title || showClose.value
return !!props.title || !!slots.title
})
const showHeader = computed(() => {
return showTitle.value || showClose.value
})
/**