feat: ✨ NumberKeyboard数字键盘增加名为title的插槽

✅ Closes: #213

Author: xuqingkai

docs/component/number-keyboard.md

@@ -92,6 +92,30 @@ const onInput = (value) => showToast(`${value}`)
 const onDelete = () => showToast('删除')
 ```
 
+## 使用 slot 自定义标题
+
+```html
+<wd-cell title="使用 slot 自定义标题" is-link @click="showKeyBoard" />
+
+<wd-number-keyboard v-model:visible="visible" extra-key="." close-text="完成" @input="onInput" @delete="onDelete">
+  <template #title>
+    <text style="color: red">自定义标题</text>
+  </template>
+</wd-number-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`。
@@ -175,7 +199,6 @@ const onDelete = () => showToast('删除')
 当前`modal`仅控制遮罩是否为透明，`hideOnClickOutside`控制弹窗是否有遮罩，当存在遮罩时，点击遮罩就可以关闭键盘，但是键盘展开时必须点击遮罩关闭当前键盘后才可以再点击别的按钮。也可以关闭`hideOnClickOutside`，手动控制键盘是否展示来实现点击外部时收起键盘，这样更灵活。
 :::
 
-
 ```html
 <wd-cell title="双向绑定" :value="value1" is-link @click="showKeyBoard" />
 <wd-number-keyboard :modal="true" :hide-on-click-outside="true" v-model:visible="visible" @input="onInput" @delete="onDelete" />
@@ -215,6 +238,12 @@ const onDelete = () => showToast('删除')
 | safeAreaInsetBottom | 是否在底部安全区域内     | `boolean`             | -                   | `true`     | 0.1.65   |
 | extraKey            | 额外按键                 | `string` / `string[]` | -                   | -          | 0.1.65   |
 
+## Slot
+
+| name  | 说明 | 类型 | 最低版本 |
+| ----- | ---- | ---- | -------- |
+| title | 标题 | -    | 1.2.12   |
+
 ## Events
 
 | 事件名称 | 说明                           | 参数        | 最低版本 |
@@ -225,8 +254,7 @@ const onDelete = () => showToast('删除')
 
 ## 外部样式类
 
-| 类名         | 说明       | 最低版本 |
-| ------------ | ---------- | -------- |
+| 类名         | 说明         | 最低版本 |
+| ------------ | ------------ | -------- |
 | custom-class | 根节点样式类 | 0.1.65   |
-| custom-style | 根节点样式 | 0.1.65   |
-
+| custom-style | 根节点样式   | 0.1.65   |

src/pages/numberKeyboard/Index.vue

@@ -8,6 +8,7 @@
         <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="双向绑定" clickable :value="value1" @click="showKeyBoard(7)" />
@@ -25,7 +26,19 @@
       @delete="onDelete"
     ></wd-number-keyboard>
     <wd-number-keyboard v-model:visible="visible3" extra-key="X" close-text="完成" @input="onInput" @delete="onDelete" />
-    <wd-number-keyboard v-model:visible="visible4" title="输入密码" extra-key="." close-text="完成" @input="onInput" @delete="onDelete" />
+    <wd-number-keyboard
+      v-model:visible="visible4"
+      title="输入密码"
+      extra-key="."
+      close-text="完成"
+      @input="onInput"
+      @delete="onDelete"
+    ></wd-number-keyboard>
+    <wd-number-keyboard v-model:visible="visible9" extra-key="." close-text="完成" @input="onInput" @delete="onDelete">
+      <template #title>
+        <text style="color: red">自定义标题</text>
+      </template>
+    </wd-number-keyboard>
 
     <wd-number-keyboard v-model:visible="visible5" mode="custom" :extra-key="['00', '.']" close-text="完成" @input="onInput" @delete="onDelete" />
 
@@ -40,7 +53,7 @@
       close-text="完成"
       @input="onInput"
       @delete="onDelete"
-    />
+    ></wd-number-keyboard>
 
     <wd-number-keyboard :modal="true" v-model:visible="visible8" @input="onInput" @delete="onDelete" />
   </page-wraper>
@@ -57,8 +70,9 @@ 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 visibleArr = [visible1, visible2, visible3, visible4, visible5, visible6, visible7, visible8]
+const visibleArr = [visible1, visible2, visible3, visible4, visible5, visible6, visible7, visible8, visible9]
 
 const value1 = ref<string>('')
 

src/uni_modules/wot-design-uni/components/wd-number-keyboard/wd-number-keyboard.vue

@@ -11,7 +11,9 @@
   >
     <view :class="`wd-number-keyboard ${customClass}`" :style="customStyle">
       <view class="wd-number-keyboard__header" v-if="showTitle">
-        <text class="wd-number-keyboard__title">{{ title }}</text>
+        <slot name="title">
+          <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">
           <text>{{ closeText }}</text>
         </view>