搜索结果列表页面开发

src/components/StateSwitchTab/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <d-tabs class="state-switch-tab" type="slider" v-model="state" @active-tab-change="handleChange($event)">
+    <d-tab v-for="(item) in tabList" :key="item.id" :id="item.id">
+      <template v-slot:title>
+        <span class="g-custom-tab-item">
+          <span class="g-custom-tab-title" :class="{ active: state === item.id }">{{ item.title }}</span>
+          &nbsp;
+          <span class="tab-num">
+            <Number v-if="item.count > 0" :number="item.count" :bit="false" :byte="false" />
+            <span v-else>0</span>
+          </span>
+        </span>
+      </template>
+    </d-tab>
+  </d-tabs>
+</template>
+<script lang="ts" setup>
+defineOptions({ name: 'state-switch' });
+import { ref } from 'vue';
+import Number from '@/components/Number/index.vue';
+import debounce from 'lodash/debounce';
+const props = withDefaults(defineProps<{
+  defaultState: string
+  tabList: {
+    count: string | number;
+    id: string;
+    title: string;
+  }[]
+}>(), {
+  defaultState: 'opened',
+  tabList: () => [
+    { count: 0, id: 'opened', title: '已开启' },
+    { count: 0, id: 'closed', title: '已关闭' },
+    { count: 0, id: 'all', title: '全部' }
+  ]
+});
+const emit = defineEmits<{
+  'active-tab-change': [value: string]
+}>();
+const state = ref(props.defaultState);
+const handleChange = debounce(($event) => {
+  emit('active-tab-change', $event);
+}, 10);
+</script>
+<style lang="scss" scoped>
+.state-switch-tab {
+  .devui-tab__content {
+    display: none;
+  }
+
+  :deep(.devui-tabs__nav--slider>li:first-child) {
+    border-left-width: 0px;
+  }
+
+  // 边框
+  // :deep(.devui-tabs__nav) {
+  //   border: 1px solid var(--devui-line, #d7d8da);
+  //   color: var(--devui-text, #252b3a);
+  //   border-color: var(--devui-line, #d7d8da);
+  //   line-height: var(--devui-line-height-base, 1.5);
+  //   border-radius: var(--border-radius);
+  //   .devui-tabs__nav-content {
+  //     justify-content: center;
+  //   }
+  // }
+
+  // item
+  // :deep(.devui-tabs__nav--wrapped>li) {
+  //   padding: 5px 12px;
+  //   min-width: 120px;
+  //   line-height: 20px;
+  //   text-align: center;
+
+  // }
+
+  .g-custom-tab-item {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--color-CG600, #707A87);
+  }
+
+  .active {
+    .g-custom-tab-item {
+      color: var(--color-G900, #2D2D2E);
+      text-shadow: none;
+    }
+  }
+
+  .tab-num {
+    display: inline-block;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 16px;
+    text-align: center;
+    color: var(--color-CG600, #707A87);
+  }
+}
+</style>