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

<template>
  <view class="kole-m-stepper" :class="stepperClass" role="group" :aria-label="label || ''">
    <view
      class="kole-m-stepper__minus"
      :role="disabled || atMin ? '' : 'button'"
      :aria-disabled="disabled || atMin ? 'true' : 'false'"
      aria-label="减少"
      @tap="minus"
    >
      <text>−</text>
    </view>
    <input
      v-if="editable"
      class="kole-m-stepper__value-input"
      type="number"
      :value="String(value)"
      :disabled="disabled"
      :aria-label="label || '数量'"
      @input="onInput"
    />
    <text
      v-else
      class="kole-m-stepper__value"
      role="spinbutton"
      :aria-valuenow="value"
      :aria-valuemin="min"
      :aria-valuemax="max"
      >{{ value }}</text
    >
    <slot></slot>
    <view
      class="kole-m-stepper__plus"
      :role="disabled || atMax ? '' : 'button'"
      :aria-disabled="disabled || atMax ? 'true' : 'false'"
      aria-label="增加"
      @tap="plus"
    >
      <text>＋</text>
    </view>
  </view>
</template>

<script setup>
/* uni-app 端 · 步进器（移动端）— 规格 §30
   跨端差异：
   ① 加减用 view + role="button"（小程序没有可聚焦的原生 button 语义），点击用 @tap；
   ② 到边界时不用原生 disabled（view 没有），改为 aria-disabled + is-disabled 类，
      代码里自己拦住点击 —— 按钮**留在原位灰**，不隐藏；
   ③ 值区用 <text>；editable 时用 uni 的 <input type="number">，
      事件对象是 { detail: { value } }，没有 DOM event.target。
   尺寸用 rpx：88rpx = 375pt 下的 44px 触控最小边长。 */
import { computed } from 'vue';

const props = defineProps({
  value: { type: Number, default: 1 },
  min: { type: Number, default: 1 },
  max: { type: Number, default: 99 },
  step: { type: Number, default: 1 },
  size: { type: String, default: 'default' },
  round: { type: Boolean, default: false },
  editable: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  label: { type: String, default: '' }
});
const emit = defineEmits(['change', 'input']);

const atMin = computed(() => props.value <= props.min);
const atMax = computed(() => props.value >= props.max);

const stepperClass = computed(() => [
  props.size === 'small' ? 'kole-m-stepper--small' : '',
  props.round ? 'kole-m-stepper--round' : '',
  props.disabled ? 'is-disabled' : '',
  props.disabled || atMin.value ? 'is-minus-disabled' : '',
  props.disabled || atMax.value ? 'is-plus-disabled' : ''
].filter(Boolean));

function clamp(next) {
  return Math.max(props.min, Math.min(props.max, next));
}

function minus() {
  if (props.disabled || atMin.value) return;
  emit('change', clamp(props.value - props.step));
}

function plus() {
  if (props.disabled || atMax.value) return;
  emit('change', clamp(props.value + props.step));
}

/* uni 的 <input> 事件对象为 { detail: { value } }，无 DOM event.target */
function onInput(e) {
  if (props.disabled) return;
  emit('input', e && e.detail ? e.detail.value : '');
}
</script>

<style>
.kole-m-stepper {
  --kole-m-stepper-height: 88rpx;  /* 控件高（88rpx = 44px，触控最小边长） */
  --kole-m-stepper-btn: 88rpx;     /* 单个加减按钮边长（44px 见方） */
  --kole-m-stepper-radius: 8rpx;
  --kole-m-touch-target: 88rpx;
  --kole-m-font-size-title: 34rpx;
  --kole-m-font-size-label: 28rpx;
  --kole-m-gutter: 32rpx;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  min-height: var(--kole-m-stepper-height);
  border: 1rpx solid var(--kole-color-border);
  border-radius: var(--kole-m-stepper-radius);
  background-color: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  overflow: hidden;
}

.kole-m-stepper--round { --kole-m-stepper-radius: 999rpx; }

/* 变体 size=small：视觉 72rpx（= 36px）紧凑；热区外扩回 88rpx */
.kole-m-stepper--small {
  --kole-m-stepper-height: 72rpx;
  --kole-m-stepper-btn: 72rpx;
}

.kole-m-stepper__minus,
.kole-m-stepper__plus {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--kole-m-stepper-btn);
  min-height: var(--kole-m-stepper-height);
  background-color: var(--kole-color-table-header-bg);
  color: var(--kole-color-text-body);
  font-size: var(--kole-m-font-size-title);
}

.kole-m-stepper__minus { border-right: 1rpx solid var(--kole-color-border); }
.kole-m-stepper__plus { border-left: 1rpx solid var(--kole-color-border); }

/* 到边界（或整组禁用）→ 原位置灰，不隐藏 */
.kole-m-stepper__minus.is-disabled,
.kole-m-stepper__plus.is-disabled,
.kole-m-stepper.is-minus-disabled .kole-m-stepper__minus,
.kole-m-stepper.is-plus-disabled .kole-m-stepper__plus {
  color: var(--kole-color-text-disabled);
  background-color: var(--kole-color-disabled-bg);
}

.kole-m-stepper.is-disabled .kole-m-stepper__value,
.kole-m-stepper.is-disabled .kole-m-stepper__value-input {
  color: var(--kole-color-text-disabled);
  background-color: var(--kole-color-disabled-bg);
}

.kole-m-stepper__value,
.kole-m-stepper__value-input {
  flex: 1;
  min-width: 88rpx;
  min-height: var(--kole-m-stepper-height);
  padding: 0 16rpx;
  text-align: center;
  font-size: 32rpx;
  color: var(--kole-color-text-body);
}

.kole-m-stepper__unit {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-right: 24rpx;
  color: var(--kole-color-text-secondary);
  font-size: var(--kole-m-font-size-label);
}
</style>