投诉详情

wuye-manager-uniapp/components/tabs/tabs.vue

@@ -1,43 +1,81 @@
 <template>
   <view class="tabs_box">
     <view
-      v-for="(item, index) in tabslist"
+      v-for="(item, index) in tabs"
       :key="index"
       @tap="handleTabs(item)"
       class="tabs_items"
       :class="{
-        active: item.value === activeValue
+        active: item.value === currentActiveValue,
+        line: showBottomLine
       }"
     >
-      {{ item[props.options.label] }}
+      {{ item.label }}
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
-type tabslistType = { name: string; value: number }
-const props = defineProps<{
-  tabslist: tabslistType[]
-  options: {
-    label: 'name'
-    value: 'value'
+// 标签项类型
+interface TabItem {
+  label: string
+  value: string | number
+}
+
+// Props 类型定义
+interface Props {
+  tabslist?: any[]
+  showBottomLine?: boolean
+  // 配置：传入字段名
+  options?: {
+    label: string
+    value: string
   }
-}>()
+  activeValue?: string | number
+}
+
+// 定义 Props
+const props = withDefaults(defineProps<Props>(), {
+  tabslist: () => [],
+  showBottomLine: true,
+  options: () => ({ label: 'name', value: 'value' }),
+  activeValue: null
+})
+
+// ======================
+// 格式化 tabs 数据（核心）
+// ======================
+const tabs = computed<TabItem[]>(() => {
+  const { tabslist, options } = props
+  if (!tabslist || tabslist.length === 0) return []
+
+  return tabslist.map(item => ({
+    label: item[options.label],
+    value: item[options.value]
+  }))
+})
+
+// ======================
+// 当前激活值（响应式）
+// ======================
+const currentActiveValue = ref<string | number>(props.activeValue ?? tabs.value[0]?.value ?? '')
+
+console.log(currentActiveValue)
+// 事件
 const emit = defineEmits<{
-  update: [value: number]
+  update: [value: string | number]
 }>()
 
-const activeValue = ref(props.tabslist[0].value)
-const handleTabs = (row: tabslistType) => {
-  activeValue.value = row[props.options.value]
-  emit('update', row[props.options.value])
+// 点击切换
+const handleTabs = (item: TabItem) => {
+  currentActiveValue.value = item.value
+  emit('update', item.value)
 }
 </script>
 
 <style lang="scss" scoped>
-// tabs
 .tabs_box {
   height: 60rpx;
   line-height: 60rpx;
@@ -48,25 +86,26 @@ const handleTabs = (row: tabslistType) => {
   overflow-x: auto;
 
   .tabs_items {
-    /* 关键：不压缩宽度 */
     flex-shrink: 0;
     margin-right: 60rpx;
-    color: #4d5dfa;
-
+    font-size: 28rpx;
+    color: #222222;
     &.active {
+      color: #4d5dfa;
       position: relative;
+    }
 
+    &.line {
       &::after {
         content: '';
         display: block;
         width: 100%;
         height: 8rpx;
-        background-color: #6371fa;
         background: linear-gradient(180deg, #4d5dfa 0%, #bac0fa 100%);
         border-radius: 4rpx;
         position: absolute;
         left: 0;
-        bottom: 0rpx;
+        bottom: 0;
       }
     }
   }