t-keyboard-number

KeyboardNumber 数字键盘

组件介绍

t-keyboard-number 是基于 Canvas 绘制的数字键盘组件，支持数字输入、小数点和确认功能，适用于金额输入、密码输入等场景。

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

基础用法参考 demo/keyboard/keyboard.uvue，通过事件监听获取输入内容。

<template>
  <view>
    <text>输入金额：{{ amount }}</text>
    <t-keyboard-number 
      @input="onInput" 
      @confirm="onConfirm" 
      @back="onBack">
    </t-keyboard-number>
  </view>
</template>

<script setup>
const amount = ref('')

function onInput(value: string) {
  amount.value += value
}

function onBack() {
  amount.value = amount.value.slice(0, -1)
}

function onConfirm() {
  console.log('确认输入：', amount.value)
}
</script>

Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	'primary'
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'

Events

事件名	说明	回调参数
input	输入时触发	value: string
confirm	确认时触发	-
back	后退/删除时触发	-