gypsy-crm-frontend-vu/components/cwg-asset-tabs.vue

<template>
  <view class="asset-tabs">
    <!-- PC/平板 标签栏 -->
    <view class="tab-list">
      <view v-for="tab in tabs" :key="tab.value" class="tab-item" :class="{ active: currentValue === tab.value }"
        @click="handleClick(tab.value)">
        <text class="tab-label">{{ tab.text }}</text>
      </view>
    </view>

    <!-- 移动端 下拉选择器 -->
    <cwg-combox v-model:value="currentValue" :clearable="false" :options="tabs" :placeholder="t('placeholder.choose')"
      class="tab-picker" />
  </view>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

// Props 定义
const props = defineProps({
  tabs: {
    type: Array,
    required: true
  },
  // v-model 绑定的值
  modelValue: {
    type: [String, Number],
    required: true
  }
})

// Emits 定义
const emit = defineEmits(['update:modelValue'])

// 内部状态，同步 props.modelValue
const currentValue = ref(props.modelValue)

// 监听 props.modelValue 变化，更新内部状态
watch(() => props.modelValue, (newVal) => {
  if (newVal !== currentValue.value) {
    currentValue.value = newVal
  }
})

// 监听内部状态变化，触发 update:modelValue 事件
watch(currentValue, (newVal) => {
  emit('update:modelValue', newVal)
})

// 点击标签切换
const handleClick = (value) => {
  if (value === currentValue.value) return
  currentValue.value = value
}
</script>

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

.asset-tabs {
  position: relative;
  width: 100%;
  margin-bottom: px2rpx(24);
  background-color: #fff;
}

.tab-list {
  display: flex;
  gap: px2rpx(20);
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #e5e5e5;
}

.tab-item {
  text-align: center;
  cursor: pointer;
  padding: px2rpx(12) 0;
}

.tab-label {
  font-size: px2rpx(14);
  color: var(--bs-heading-color);
  transition: all 0.3s;
}

.tab-item.active .tab-label {
  color: var(--color-primary);
  font-weight: 500;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: px2rpx(10);
}

.tab-picker {
  display: none;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .tab-list {
    display: none;
  }

  .tab-picker {
    display: block;
  }
}
</style>