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

<template>
  <view class="kole-m-radio-group" :class="groupClass" role="radiogroup" :aria-label="label">
    <view
      v-for="(item, i) in options"
      :key="String(keyOf(item, i))"
      class="kole-m-radio"
      :class="{ 'kole-m-radio--button': button, 'is-checked': keyOf(item, i) === value }"
      :role="item && (item.disabled || disabled) ? '' : 'radio'"
      :aria-checked="keyOf(item, i) === value ? 'true' : 'false'"
      :aria-disabled="item && (item.disabled || disabled) ? 'true' : 'false'"
      @tap="pick(item, i)"
    >
      <view class="kole-m-radio__icon" />
      <view class="kole-m-radio__label">
        <text>{{ item && item.label }}</text>
        <text v-if="item && item.desc" class="kole-m-radio__desc">{{ item.desc }}</text>
      </view>
    </view>
    <slot></slot>
  </view>
</template>

<script setup>
/* uni-app 端 · 单选框（移动端）— 规格 §33
   跨端差异：
   ① 项用 view + role="radio"（小程序没有可聚焦的原生 button 语义差异），点击用 @tap；
   ② 选中态靠 is-checked 类 + aria-checked 双写；圆点用 view + ::after 内圈（与 H5 同一视觉规则）；
   ③ 禁用不用原生 disabled（view 没有），改为 aria-disabled + is-disabled 类，代码里自己拦点击。
   尺寸用 rpx：88rpx = 375pt 下的 44px 触控最小边长，圆点 40rpx = 20px。 */
import { computed } from 'vue';

const props = defineProps({
  options: { type: Array, default: () => [] },
  value: { type: String, default: '' },
  orientation: { type: String, default: 'vertical' },
  button: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  label: { type: String, default: '单选项' }
});
const emit = defineEmits(['change']);

const groupClass = computed(() => [
  props.orientation === 'horizontal' ? 'kole-m-radio-group--horizontal' : '',
  props.disabled ? 'is-disabled' : ''
].filter(Boolean));

function keyOf(item, i) {
  return item && item.value !== undefined ? item.value : String(i);
}

function pick(item, i) {
  if (props.disabled || (item && item.disabled)) return;
  emit('change', keyOf(item, i));
}
</script>

<style>
.kole-m-radio-group {
  --kole-m-radio-size: 40rpx;   /* 圆点直径（20px @375pt） */
  --kole-m-radio-gap: 24rpx;    /* 圆点与文字的间距 */
  --kole-m-touch-target: 88rpx;
  --kole-m-font-size-body: 32rpx;
  --kole-m-font-size-label: 28rpx;
  --kole-m-gutter: 32rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-size: var(--kole-m-font-size-body);
}

.kole-m-radio-group--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.kole-m-radio-group:not(.kole-m-radio-group--horizontal) .kole-m-radio + .kole-m-radio {
  border-top: 1rpx solid var(--kole-color-border);
}

.kole-m-radio {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--kole-m-touch-target);
  padding: 24rpx var(--kole-m-gutter);
  background-color: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-size: inherit;
}

.kole-m-radio-group--horizontal .kole-m-radio {
  width: auto;
  padding-left: 24rpx;
  padding-right: 24rpx;
}

/* 状态 active：按下反馈 */
.kole-m-radio:active { background-color: var(--kole-color-table-header-bg); }

/* 圆点：未选中空心环，选中实心 + 内圈反色点（形状差异，不只靠颜色） */
.kole-m-radio__icon {
  position: relative;
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--kole-m-radio-size);
  height: var(--kole-m-radio-size);
  margin-right: var(--kole-m-radio-gap);
  border: 1rpx solid var(--kole-color-text-placeholder);
  border-radius: 50%;
  background-color: var(--kole-color-card-bg);
}

.kole-m-radio__icon::after {
  content: '';
  position: absolute;
  top: 6rpx;
  left: 6rpx;
  width: 28rpx;
  height: 28rpx;
  border-radius: 50%;
  background-color: var(--kole-color-text-inverse);
  transform: scale(0);
}

/* 状态 checked */
.kole-m-radio.is-checked .kole-m-radio__icon {
  border-color: var(--kole-color-brand);
  background-color: var(--kole-color-brand);
}

.kole-m-radio.is-checked .kole-m-radio__icon::after { transform: scale(1); }

.kole-m-radio__label { flex: 1; display: flex; flex-direction: column; }

.kole-m-radio__desc {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--kole-m-font-size-label);
  color: var(--kole-color-text-secondary);
}

/* 变体 button=true：胶囊标签式（无圆点） */
.kole-m-radio--button {
  width: auto;
  padding: 16rpx 32rpx;
  border: 1rpx solid var(--kole-color-border);
  border-radius: 999rpx;
  color: var(--kole-color-text-secondary);
  font-size: var(--kole-m-font-size-label);
}

.kole-m-radio--button .kole-m-radio__icon { display: none; }

.kole-m-radio--button.is-checked {
  border-color: var(--kole-color-brand);
  background-color: var(--kole-color-brand-bg);
  color: var(--kole-color-brand);
}

/* 状态 disabled：置灰且不响应 */
.kole-m-radio[aria-disabled='true'] { color: var(--kole-color-text-disabled); }

.kole-m-radio[aria-disabled='true'] .kole-m-radio__icon {
  border-color: var(--kole-color-text-disabled);
  background-color: var(--kole-color-disabled-bg);
}

.kole-m-radio--button[aria-disabled='true'] {
  border-color: var(--kole-color-border);
  background-color: var(--kole-color-disabled-bg);
  color: var(--kole-color-text-disabled);
}
</style>