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

<template>
  <view class="kole-m-textarea" :class="textareaClass">
    <textarea
      class="kole-m-textarea__control"
      :value="value"
      :placeholder="placeholder"
      :maxlength="maxlength"
      :disabled="disabled"
      :aria-label="label"
      :aria-invalid="error ? 'true' : 'false'"
      placeholder-class="kole-m-textarea__placeholder"
      :auto-height="false"
      @input="onInput"
    />
    <view v-if="showCounter || error" class="kole-m-textarea__foot">
      <text v-if="error" class="kole-m-textarea__error">{{ error }}</text>
      <text v-if="showCounter" class="kole-m-textarea__counter">{{ length }}/{{ maxlength }}</text>
    </view>
    <slot></slot>
  </view>
</template>

<script setup>
/* uni-app 端 · 多行文本框（移动端）— 规格 §31
   跨端差异：
   ① <textarea> 是 uni 基础组件，事件对象是 { detail: { value } }，没有 DOM 的 event.target；
   ② auto-height 显式置 false：高度随内容跳动会让上下文错位（规格 §31.5 不做自动增高）；
      uni 的 textarea 是原生层级组件，不使用 resize（App/小程序无此概念），高度由 rows 与 CSS 最小高决定；
   ③ 计数用 <text>，不做 aria-live（小程序读屏不支持该属性，宿主可选播报）。
   尺寸用 rpx：48rpx = 375pt 下的 24px 行高，故默认最小高 264rpx（≈3 行）。 */
import { computed } from 'vue';

const props = defineProps({
  value: { type: String, default: '' },
  size: { type: String, default: 'default' },
  placeholder: { type: String, default: '' },
  maxlength: { type: Number, default: 200 },
  showCounter: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
  error: { type: String, default: '' },
  label: { type: String, default: '多行文本' },
  rows: { type: Number, default: 3 }
});
const emit = defineEmits(['input']);

const length = computed(() => String(props.value || '').length);
const full = computed(() => props.maxlength > 0 && length.value >= props.maxlength);

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

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

<style>
.kole-m-textarea {
  --kole-m-textarea-min-height: 264rpx;  /* 最小高度（≈3 行 × 48rpx 行高 + 上下内边距） */
  --kole-m-font-size-body: 32rpx;
  --kole-m-font-size-label: 28rpx;
  --kole-m-gutter: 32rpx;
  box-sizing: border-box;
  display: block;
  width: 100%;
}

.kole-m-textarea--large { --kole-m-textarea-min-height: 408rpx; }

.kole-m-textarea__control {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: var(--kole-m-textarea-min-height);
  padding: 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);
  line-height: 1.5;
}

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

.kole-m-textarea.is-error .kole-m-textarea__control { border-color: var(--kole-color-error); }

.kole-m-textarea.is-disabled .kole-m-textarea__control {
  background-color: var(--kole-color-disabled-bg);
  color: var(--kole-color-text-disabled);
}

.kole-m-textarea__foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-top: 12rpx;
}

.kole-m-textarea__error {
  font-size: var(--kole-m-font-size-label);
  color: var(--kole-color-error);
}

.kole-m-textarea__counter {
  margin-left: auto;
  font-size: var(--kole-m-font-size-label);
  color: var(--kole-color-text-secondary);
}

/* 状态 full：到达上限时计数变错误色 */
.kole-m-textarea.is-full .kole-m-textarea__counter { color: var(--kole-color-error); }
</style>