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

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

<script>
export default {
  name: "TabRadio",
  props: {
    tabList: {
      type: Array,
      required: true,
      default: () => []
    },
    defaultActive: {
      type: [String, Number],
      default: ""
    },
    colNum: {
      type: Number,
      default: 4
    }
  },
  data() {
    return {
      activeValue: this.defaultActive
    };
  },
  methods: {
    handleTabClick(item) {
      this.activeValue = item.value;
      this.$emit("tabChange", {
        name: item.name,
        value: item.value
      });
    }
  }
};
</script>

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