今日巡检-前端搭建

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

@@ -0,0 +1,70 @@
+<template>
+  <view class="tabs_box">
+    <view
+      v-for="(item, index) in tabslist"
+      :key="index"
+      @tap="handleTabs(item)"
+      class="tabs_items"
+      :class="{
+        active: item.value === activeValue
+      }"
+    >
+      {{ item.name }}
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+type tabslistType = { name: string; value: number }
+const props = defineProps<{
+  tabslist: tabslistType[]
+}>()
+const emit = defineEmits<{
+  update: [value: number]
+}>()
+
+const activeValue = ref(0)
+const handleTabs = (row: tabslistType) => {
+  activeValue.value = row.value
+  emit('update', row.value)
+}
+</script>
+
+<style lang="scss" scoped>
+// tabs
+.tabs_box {
+  height: 60rpx;
+  line-height: 60rpx;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  overflow-y: hidden;
+  overflow-x: auto;
+
+  .tabs_items {
+    /* 关键：不压缩宽度 */
+    flex-shrink: 0;
+    margin-right: 60rpx;
+    color: #4d5dfa;
+
+    &.active {
+      position: relative;
+
+      &::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;
+      }
+    }
+  }
+}
+</style>