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

<template>
  <div class="kole-m-checkbox-group" :class="groupClass" role="group" :aria-label="label">
    <button
      v-if="selectAll"
      class="kole-m-checkbox kole-m-checkbox--all"
      :class="{ 'is-checked': allState === 'true', 'is-indeterminate': allState === 'mixed' }"
      type="button"
      role="checkbox"
      :aria-checked="allState"
      :disabled="disabled"
      @click="toggleAll"
    >
      <span class="kole-m-checkbox__icon" aria-hidden="true"></span>
      <span class="kole-m-checkbox__label">全选</span>
    </button>
    <button
      v-for="(item, i) in options"
      :key="String(keyOf(item, i))"
      class="kole-m-checkbox"
      :class="{ 'kole-m-checkbox--button': button, 'is-checked': isPicked(item, i) }"
      type="button"
      role="checkbox"
      :aria-checked="isPicked(item, i) ? 'true' : 'false'"
      :aria-disabled="item && (item.disabled || disabled) ? 'true' : null"
      :disabled="!!(item && (item.disabled || disabled))"
      @click="toggle(item, i)"
    >
      <span class="kole-m-checkbox__icon" aria-hidden="true"></span>
      <span class="kole-m-checkbox__label">
        {{ item && item.label }}
        <span v-if="item && item.desc" class="kole-m-checkbox__desc">{{ item.desc }}</span>
      </span>
    </button>
    <slot></slot>
  </div>
</template>

<script>
/* 多选框（移动端）— 规格 §34
   一组里可以同时选中多项；勾选态用「勾号出现/消失」+ aria-checked 双通道表达（不只靠颜色）。
   含全选形态：全选行不存储自己的状态，而是由组内各项推导出「全选 / 半选 / 空」三态
   （半选写 aria-checked="mixed"，这是 checkbox 角色允许的第三个值）。
   整行（方框 + 文字）都是 44px 高的热区。本端只回传下一组值，是否采纳由宿主决定。 */

export default {
  name: 'KoleMCheckbox',
  props: {
    options: { type: Array, default: function () { return []; } },
    value: { type: Array, default: function () { return []; } },
    orientation: { type: String, default: 'vertical' },
    button: { type: Boolean, default: false },
    selectAll: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false },
    label: { type: String, default: '多选项' }
  },
  computed: {
    groupClass: function () {
      return [
        this.orientation === 'horizontal' ? 'kole-m-checkbox-group--horizontal' : '',
        this.disabled ? 'is-disabled' : ''
      ].filter(Boolean);
    },
    allState: function () {
      var total = this.options.length;
      var picked = 0;
      for (var i = 0; i < total; i++) if (this.isPicked(this.options[i], i)) picked++;
      if (picked === 0) return 'false';
      return picked === total ? 'true' : 'mixed';
    }
  },
  methods: {
    keyOf: function (item, i) {
      return item && item.value !== undefined ? item.value : String(i);
    },
    isPicked: function (item, i) {
      return this.value.indexOf(this.keyOf(item, i)) >= 0;
    },
    toggle: function (item, i) {
      if (this.disabled || (item && item.disabled)) return;
      var key = this.keyOf(item, i);
      var has = this.value.indexOf(key) >= 0;
      this.$emit('change', has ? this.value.filter(function (k) { return k !== key; }) : this.value.concat([key]));
    },
    toggleAll: function () {
      var self = this;
      if (this.disabled) return;
      /* 只要还有没选中的就全选，否则全部清空（与演示页同一判据） */
      var anyOff = this.options.some(function (o, i) {
        return !(o && o.disabled) && !self.isPicked(o, i);
      });
      this.$emit(
        'change',
        anyOff
          ? this.options.filter(function (o) { return o && !o.disabled; }).map(function (o) { return o.value || ''; })
          : []
      );
    }
  }
};
</script>

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