crm-app-vue3/components/custom-tab-select/index.vue

<template>
  <view class="tab-radio-container" :style="{ gridTemplateColumns: `repeat(${colNum}, 1fr)` }">
    <view 
      class="tab-item"
      :class="{ 
        'tab-item--active': isMultiple ? activeValues.includes(item.value) : activeValue === item.value,
        'tab-item--multiple': isMultiple
      }"
      v-for="(item, index) in tabList"
      :key="index"
      @click="handleTabClick(item)"
    >
      <text class="tab-item__text">{{ item.name }}</text>
      <!-- <view v-if="isMultiple" class="tab-item__checkbox" :class="{ 'tab-item__checkbox--checked': activeValues.includes(item.value) }">
        <view v-if="activeValues.includes(item.value)" class="tab-item__checkbox-inner"></view>
      </view> -->
    </view>
  </view>
</template>

<script>
export default {
  name: "TabRadio",
  props: {
    tabList: {
      type: Array,
      required: true,
      default: () => []
    },
    defaultActive: {
      type: [String, Number, Array],
      default: ""
    },
    colNum: {
      type: Number,
      default: 4
    },
    mode: {
      type: String,
      default: "single",
      validator: (value) => ["single", "multiple"].includes(value)
    }
  },
  computed: {
    isMultiple() {
      return this.mode === "multiple";
    }
  },
  data() {
    return {
      activeValue: this.defaultActive,
      activeValues: Array.isArray(this.defaultActive) ? this.defaultActive : []
    };
  },
  watch: {
    defaultActive: {
      handler(val) {
        if (this.isMultiple) {
          this.activeValues = Array.isArray(val) ? val : [];
        } else {
          this.activeValue = val;
        }
      },
      immediate: true
    }
  },
  methods: {
    handleTabClick(item) {
      if (this.isMultiple) {
        this.handleMultipleSelect(item);
      } else {
        this.handleSingleSelect(item);
      }
    },
    handleSingleSelect(item) {
      this.activeValue = item.value;
      this.$emit("tabChange", item.value);
    },
    handleMultipleSelect(item) {
      const index = this.activeValues.indexOf(item.value);
      if (index > -1) {
        this.activeValues.splice(index, 1);
      } else {
        this.activeValues.push(item.value);
      }
      this.$emit("tabChange", [...this.activeValues]);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>