aurora-admin/frameworks-mobile/Form.vue2.vue

<template>
  <form class="kole-m-form" :class="formClass" novalidate @submit.prevent="onSubmit">
    <div
      v-for="(item, i) in fields"
      :key="String(keyOf(item, i))"
      class="kole-m-form__item"
      :class="{ 'is-error': !!(item && item.error) }"
    >
      <span class="kole-m-form__label" :id="labelId(item, i)">
        <span v-if="item && item.required" class="kole-m-form__star" aria-hidden="true">*</span>{{ item && item.label }}
      </span>
      <span class="kole-m-form__main">
        <button
          v-if="item && item.type === 'select'"
          class="kole-m-form__hit"
          type="button"
          :aria-labelledby="labelId(item, i)"
          aria-haspopup="dialog"
          :disabled="disabled"
        >
          <span>{{ item.value || item.placeholder || '' }}</span>
          <span aria-hidden="true">›</span>
        </button>
        <textarea
          v-else-if="item && item.type === 'textarea'"
          class="kole-m-form__control kole-m-form__control--multiline"
          :name="item.name"
          :rows="item.rows || 2"
          :value="item.value || ''"
          :placeholder="item.placeholder || ''"
          :disabled="disabled"
          :required="!!item.required"
          :aria-labelledby="labelId(item, i)"
          :aria-required="item.required ? 'true' : null"
          :aria-invalid="item.error ? 'true' : null"
          :aria-describedby="describedBy(item, i)"
          @input="onInput(item, $event)"
        ></textarea>
        <input
          v-else
          class="kole-m-form__control"
          type="text"
          :inputmode="(item && item.inputMode) || null"
          :name="item && item.name"
          :value="(item && item.value) || ''"
          :placeholder="(item && item.placeholder) || ''"
          :disabled="disabled"
          :required="!!(item && item.required)"
          :aria-labelledby="labelId(item, i)"
          :aria-required="item && item.required ? 'true' : null"
          :aria-invalid="item && item.error ? 'true' : null"
          :aria-describedby="describedBy(item, i)"
          @input="onInput(item, $event)"
        />
        <span v-if="item && item.error" class="kole-m-form__error" :id="errorId(item, i)" role="alert">{{ item.error }}</span>
        <span v-if="item && item.hint" class="kole-m-form__hint" :id="hintId(item, i)">{{ item.hint }}</span>
      </span>
    </div>
    <slot></slot>
    <div v-if="submitText" class="kole-m-form__item">
      <button class="kole-m-form__submit" type="submit" :disabled="disabled">{{ submitText }}</button>
    </div>
  </form>
</template>

<script>
/* 表单（移动端）— 规格 §32
   结构：item（字段）> label（标签 + 必填星号）/ main（控件 + 错误提示）。
   移动端与桌面端的关键差别是**标签位置**：窄屏默认置顶标签（labelPosition=top），
   需要一组纵向对齐的字段时才用 left（定宽标签列）。
   必填星号是装饰（aria-hidden），语义由控件的 aria-required / required 承担；
   错误态由字段级 is-error + 控件 aria-invalid 双写，错误文案用 aria-describedby 关联。
   本端只做「必填」的结构表达，不发请求、不做正则校验（业务规则在宿主，规格 §32.7）。 */
var seq = 0;

export default {
  name: 'KoleMForm',
  props: {
    fields: { type: Array, default: function () { return []; } },
    labelPosition: { type: String, default: 'top' },
    borderless: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false },
    submitText: { type: String, default: '提交' }
  },
  data: function () {
    seq += 1;
    return { base: 'kole-m-form-' + seq };
  },
  computed: {
    formClass: function () {
      return [
        this.labelPosition === 'left' ? 'kole-m-form--left' : '',
        this.borderless ? 'kole-m-form--borderless' : '',
        this.disabled ? 'is-disabled' : ''
      ].filter(Boolean);
    }
  },
  methods: {
    keyOf: function (item, i) {
      return item && item.name !== undefined ? item.name : i;
    },
    labelId: function (item, i) {
      return this.base + '-label-' + this.keyOf(item, i);
    },
    errorId: function (item, i) {
      return this.base + '-error-' + this.keyOf(item, i);
    },
    hintId: function (item, i) {
      return this.base + '-hint-' + this.keyOf(item, i);
    },
    describedBy: function (item, i) {
      var ids = [];
      if (item && item.error) ids.push(this.errorId(item, i));
      if (item && item.hint) ids.push(this.hintId(item, i));
      return ids.length ? ids.join(' ') : null;
    },
    onInput: function (item, e) {
      if (this.disabled) return;
      this.$emit('change', item && item.name, e.target.value);
    },
    onSubmit: function () {
      if (this.disabled) return;
      this.$emit('submit', this.fields);
    }
  }
};
</script>

<style src="./Form.css"></style>