搜索结果列表页面开发

src/components/CustomTab/README.md

@@ -0,0 +1,17 @@
+### 自定义 icon tabbar
+
+### Props
+
+| 参数             | 说明             | 类型    | 可选值                                      | 默认值  |
+| ---------------- | ---------------- | ------- | ------------------------------------------- | ------- |
+| defaultValue     | 默认 tabkey      | string  | —                                           | ''      |
+| type             | 选项卡组的类型   | string  | 'tabs';'pills';'options';'wrapped';'slider' | 'pills' |
+| tabPosition      | 选项卡所在的位置 | string  | 'top' ;'right' ;'bottom' ;'left'            | ''      |  |
+| hiddenDashedLine | 隐藏高亮的下划线 | boolean | —                                           | -       |
+| list             | tabbar 数据      | array   | —                                           | []      |
+
+### Emits
+
+| 方法              | 类型                    | 说明                                          | 返回值 |
+| ----------------- | ----------------------- | --------------------------------------------- | ------ |
+| active-tab-change | function(string/number) | 选项卡切换的回调函数，返回当前激活选项卡的 id | -      |

src/components/CustomTab/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <d-tabs :type="type" :tab-position="tabPosition" v-model="value"
+    :class="['g-custom-tab', { 'hidden-dashed-line': hiddenDashedLine }, $attrs.class]"
+    @active-tab-change="$emit('active-tab-change', $event)">
+    <d-tab v-for="(item) in list" :key="item.id" :id="item.id">
+      <template v-slot:title>
+        <span class="g-custom-tab-item">
+          <template v-if="item.icon || item.classIcon">
+            <Icon :name="item.icon" :class="item.classIcon" />&nbsp;
+          </template>
+          <span class="g-custom-tab-title" :class="{ active: value === item.id }">{{ item.title }}</span>
+          <template v-if="item.count">&nbsp;
+            <span class="g-custom-tab-num">
+              <Number :number="item.count" :bit="false"/>
+            </span>
+          </template>
+        </span>
+      </template>
+    </d-tab>
+  </d-tabs>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'CustomTab' });
+import Number from '@/components/Number/index.vue';
+import { ref } from 'vue';
+defineEmits(['active-tab-change']);
+
+const props = withDefaults(defineProps<{
+  defaultValue?: string; // 默认 tabkey
+  type?: 'tabs' | 'pills' | 'options' | 'wrapped' | 'slider';
+  tabPosition?: 'top' | 'right' | 'bottom' | 'left';
+  hiddenDashedLine?: boolean; // 影藏高亮的下划线
+  list: {
+    id: number | string; // tabkey
+    title: string // 选项卡的标题
+    icon?: string; // icon
+    classIcon?: string; // 自定义图案
+    disabled?: boolean	// 选项卡是否不可用
+    count?: number
+  }[];
+}>(), {
+  type: 'pills',
+  list: () => []
+});
+
+const value = ref(props.defaultValue);
+</script>
+
+<style lang="scss" scoped>
+.hidden-dashed-line :deep(.devui-tabs__nav--pills li:after) {
+  display: none !important;
+}
+
+.g-custom-tab {
+  :deep(.devui-tab__content) {
+    display: none !important;
+  }
+  &-item {
+    :deep(.devui-icon__container) {
+      vertical-align: -0.125em;
+    }
+  }
+  &-title {
+    vertical-align: top;
+  }
+  &-num {
+    width: 33px;
+    height: 22px;
+    padding: 1px 8px 1px 8px;
+    border-radius: 20px;
+    color: #606060;
+    font-weight: 400;
+  }
+}
+</style>
+
+<style lang="scss">
+.custom-filter-tab {
+  .devui-tabs__nav--wrapped>li {
+    color: var(--color-light);
+    &:hover:not(.active):not(.disabled) a {
+      color: var(--color-light);
+    }
+  }
+}
+</style>