更新记录

1.0.0（2025-12-11） 下载此版本

• 初始发布：封装 boc-number-keyboard 组件，内含拖拽弹窗与数字键盘。

平台兼容性

uni-app(3.6.15)

uni-app x(3.6.15)

其他

boc-number-keyboard

数字键盘弹窗组件，内置拖拽弹窗与自适应缩放，兼容移动端与宽屏。
包含三个子组件：boc-number-keyboard（入口）、NumberKeyboard（键盘本体）、DraggablePopup（拖拽弹窗）。

安装

将本插件放入项目 uni_modules 目录，HBuilderX/uniapp 将自动识别。

使用示例

<template>
  <view>
    <button @click="openKeyboard">打开键盘</button>
    <boc-number-keyboard
      ref="keyboardRef"
      mode="auto"
      theme="light"
      @confirm="onConfirm"
      @close="onClose"
    />
  </view>
</template>

<script>
export default {
  methods: {
    openKeyboard(e) {
      // 第二个参数可传入点击事件用于定位动画起点
      this.$refs.keyboardRef.open(0, e)
    },
    onConfirm(val) {
      console.log('confirm', val)
    },
    onClose() {
      console.log('closed')
    }
  }
}
</script>

属性

• theme：light | dark，默认 light
• mask：是否显示遮罩，默认 true
• maskClosable：点遮罩是否关闭，默认 false
• mode：auto | center | position，默认 auto
• widthThreshold：宽屏阈值，默认 662（mobile 断点）

方法

• open(value = 0, event = null)：打开键盘并设置初始值，可传入点击事件确定定位/动画起点
• close()：关闭键盘

事件

• confirm(value)：点击确认触发
• close：关闭弹窗时触发

目录结构

• components/boc-number-keyboard/boc-number-keyboard.vue 主组件
• components/boc-number-keyboard/NumberKeyboard.vue 内部数字键盘
• components/boc-number-keyboard/DraggablePopup.vue 拖拽弹窗容器
• common/variables.js 尺寸/断点配置

更多发布要求参考官方文档：https://uniapp.dcloud.net.cn/plugin/publish.html#components