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

<template>
  <view class="kole-m-field">
    <view class="kole-m-input" :class="fieldClass">
      <text v-if="prefix" class="kole-m-input__prefix">{{ prefix }}</text>
      <input
        class="kole-m-input__control"
        type="text"
        :value="value"
        :placeholder="placeholder"
        :disabled="disabled"
        :aria-label="label"
        :aria-invalid="error ? 'true' : 'false'"
        placeholder-class="kole-m-input__placeholder"
        @input="onInput"
        @confirm="onConfirm"
      />
      <view
        v-if="clearable && filled && !disabled"
        class="kole-m-input__clear"
        role="button"
        aria-label="清除"
        @tap="clear"
      >
        <text>✕</text>
      </view>
      <slot></slot>
    </view>
    <text v-if="error" class="kole-m-input__error">{{ error }}</text>
  </view>
</template>

<script setup>
/* uni-app 端 · 输入框（移动端）— 规格 §27
   跨端差异：
   ① <input> 是 uni 基础组件，事件对象是 { detail: { value } }，**没有 DOM 的 event.target**
      （这是本批次最容易踩的坑，照 frameworks-uniapp-pc/Input.uniapp.vue 的形态写）；
   ② 清除按钮用 view + role="button"（小程序没有可聚焦的原生 button 语义），点击用 @tap；
   ③ 键盘「完成」键是 @confirm，不是 keydown.enter。
   尺寸用 rpx：88rpx = 375pt 下的 44px 触控最小边长，故默认高 88rpx、large 104rpx。 */
import { computed } from 'vue';

const props = defineProps({
  value: { type: String, default: '' },
  size: { type: String, default: 'default' },
  placeholder: { type: String, default: '' },
  prefix: { type: String, default: '' },
  clearable: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  error: { type: String, default: '' },
  label: { type: String, default: '输入框' }
});
const emit = defineEmits(['input', 'confirm', 'clear']);

const filled = computed(() => String(props.value || '').length > 0);

const fieldClass = computed(() => [
  props.size === 'large' ? 'kole-m-input--large' : '',
  filled.value ? 'is-filled' : '',
  props.error ? 'is-error' : '',
  props.disabled ? 'is-disabled' : ''
].filter(Boolean));

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

function onConfirm(e) {
  if (props.disabled) return;
  emit('confirm', e && e.detail ? e.detail.value : props.value);
}

function clear() {
  if (props.disabled) return;
  emit('clear');
}
</script>

<style>
.kole-m-field {
  box-sizing: border-box;
  width: 100%;
}

.kole-m-input {
  --kole-m-input-height: 88rpx;   /* 默认高度（88rpx = 44px，触控最小边长） */
  --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;
  align-items: center;
  width: 100%;
  min-height: var(--kole-m-input-height);
  padding: 0 24rpx;
  border: 1rpx solid var(--kole-color-border);
  border-radius: 8rpx;
  background-color: var(--kole-color-card-bg);
  color: var(--kole-color-text-body);
  font-size: var(--kole-m-font-size-body);
}

/* 变体 size=large */
.kole-m-input--large { --kole-m-input-height: 104rpx; }

/* 状态 focus：聚焦反馈只改边框，不改高度 */
.kole-m-input:focus-within { border-color: var(--kole-color-brand); }

/* 状态 error */
.kole-m-input.is-error { border-color: var(--kole-color-error); }

/* 状态 disabled */
.kole-m-input.is-disabled {
  background-color: var(--kole-color-disabled-bg);
  color: var(--kole-color-text-disabled);
}

.kole-m-input__prefix {
  flex-shrink: 0;
  padding-right: 12rpx;
  color: var(--kole-color-text-secondary);
  font-size: var(--kole-m-font-size-label);
}

.kole-m-input__control {
  flex: 1;
  min-width: 0;
  height: var(--kole-m-input-height);
  font-size: var(--kole-m-font-size-body);
  color: inherit;
}

.kole-m-input__placeholder { color: var(--kole-color-text-placeholder); }

/* 清除按钮：视觉小、热区 88rpx */
.kole-m-input__clear {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88rpx;
  height: 88rpx;
  margin-right: -24rpx;
  color: var(--kole-color-text-placeholder);
  font-size: var(--kole-m-font-size-label);
}

.kole-m-input__error {
  display: block;
  margin-top: 12rpx;
  font-size: var(--kole-m-font-size-label);
  color: var(--kole-color-error);
}
</style>