aurora-admin/frameworks-mobile/NumberKeyboard.uniapp.vue

<template>
  <view>
    <slot></slot>
    <view
      class="kole-m-numberkeyboard"
      :class="{ 'is-open': open }"
      :role="'group'"
      :aria-label="groupLabel"
    >
      <view
        v-for="key in keys"
        :key="key"
        class="kole-m-numberkeyboard__key"
        role="button"
        :aria-label="key"
        @tap="press(key)"
      >
        <text>{{ key }}</text>
      </view>
      <view
        v-if="showDelete"
        class="kole-m-numberkeyboard__key kole-m-numberkeyboard__key--delete"
        role="button"
        aria-label="删除"
        @tap="press('delete')"
      >
        <text>⌫</text>
      </view>
      <view
        v-if="showConfirm"
        class="kole-m-numberkeyboard__confirm"
        :role="'button'"
        :aria-disabled="confirmDisabled ? 'true' : 'false'"
        @tap="press('confirm')"
      >
        <text>确认</text>
      </view>
    </view>
  </view>
</template>

<script setup>
/* uni-app 端 · 数字键盘（移动端）— 规格 §17
   跨端差异：小程序与 App 端没有 DOM，按键用 view + role="button" + aria-label（role 在 H5
   产物里生效），文字包在 text 里；点击用 @tap，不用 @click / PointerEvent。
   键盘本身不持有输入值，只把按键名 emit 给宿主（规格 §17.5）；
   确认键的 disabled 态在 uni 端用 aria-disabled 表达（view 没有原生 disabled 属性）。
   尺寸用 rpx（88rpx = 375pt 下的 44px 触控最小边长）。 */
import { computed } from 'vue';

const props = defineProps({
  type: { type: String, default: 'number' },
  showDelete: { type: Boolean, default: true },
  showConfirm: { type: Boolean, default: false },
  open: { type: Boolean, default: false },
  confirmDisabled: { type: Boolean, default: false }
});
const emit = defineEmits(['input']);

/* 按键表：与规格 §17.3 的 type 变体一一对应（digit 少一个 "."） */
const NUMBER_KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0'];
const DIGIT_KEYS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];

const keys = computed(() => (props.type === 'digit' ? DIGIT_KEYS : NUMBER_KEYS));
const groupLabel = computed(() => (props.type === 'digit' ? '数字键盘（纯数字）' : '数字键盘（含小数点）'));

/* 删除键与确认键也走同一条 emit 通道：宿主要想区分，看载荷是不是 'delete' / 'confirm' */
function press(key) {
  if (key === 'confirm' && props.confirmDisabled) return;
  emit('input', key);
}
</script>

<style>
.kole-m-numberkeyboard {
  --kole-m-numberkeyboard-gap: 1rpx;
  --kole-m-action-height: 112rpx;
  --kole-m-touch-target: 88rpx;
  --kole-m-font-size-title: 34rpx;
  --kole-m-font-size-body: 32rpx;
  --kole-m-font-size-label: 28rpx;
  --kole-m-gutter: 32rpx;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2001;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: var(--kole-color-border);
}

.kole-m-numberkeyboard.is-open { transform: translateY(0); }

.kole-m-numberkeyboard__key {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 33.33%;
  min-height: var(--kole-m-action-height);
  background-color: var(--kole-color-card-bg);
  border: 1rpx solid var(--kole-color-border);
  color: var(--kole-color-text-body);
  font-size: var(--kole-m-font-size-title);
  line-height: 1;
}

/* 状态 active：按下反馈；小程序无 :active，靠 hover-class 或宿主侧实现 */
.kole-m-numberkeyboard__key[aria-disabled="true"] { opacity: .5; }

/* 变体 type=digit：纯 0-9，没有小数点键时删除键独占最后一格 */
.kole-m-numberkeyboard__key--delete { color: var(--kole-color-text-secondary); }

/* 变体 showConfirm=true：确认键跨两列 */
.kole-m-numberkeyboard__confirm {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66.66%;
  min-height: var(--kole-m-action-height);
  background-color: var(--kole-color-brand);
  color: var(--kole-color-text-inverse);
  font-size: var(--kole-m-font-size-body);
  line-height: 1;
}

/* 状态 disabled：确认键不可用 */
.kole-m-numberkeyboard__confirm[aria-disabled="true"] {
  background-color: var(--kole-color-disabled-bg);
  color: var(--kole-color-text-disabled);
}
</style>