|
|
@@ -12,20 +12,41 @@
|
|
|
@click="handleClick(item)"
|
|
|
:style="{ minWidth: width + 'px' }"
|
|
|
>
|
|
|
- <div
|
|
|
- v-if="item.prefixColor"
|
|
|
- class="tab-list_item-prefix"
|
|
|
- :style="{ backgroundColor: item.prefixColor }"
|
|
|
- />
|
|
|
- <div :class="['tab-list_item-cnt']">
|
|
|
- <span>{{ item.label }}</span>
|
|
|
- <span
|
|
|
- v-if="item.hasValue"
|
|
|
- :style="{ color: selected == item.key ? '#ffffff' : item.valueColor || '#273240' }"
|
|
|
- >
|
|
|
- <span v-if="item.hasBracket">({{ item.value }})</span>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
+ <a-tooltip placement="top" v-if="item.toolTipTitle">
|
|
|
+ <template #title>
|
|
|
+ <span>{{ item.toolTipTitle }}</span>
|
|
|
+ </template>
|
|
|
+ <div
|
|
|
+ v-if="item.prefixColor"
|
|
|
+ class="tab-list_item-prefix"
|
|
|
+ :style="{ backgroundColor: item.prefixColor }"
|
|
|
+ />
|
|
|
+ <div :class="['tab-list_item-cnt']">
|
|
|
+ <span>{{ item.label }}</span>
|
|
|
+ <span
|
|
|
+ v-if="item.hasValue"
|
|
|
+ :style="{ color: selected == item.key ? '#ffffff' : item.valueColor || '#273240' }"
|
|
|
+ >
|
|
|
+ <span v-if="item.hasBracket">({{ item.value }})</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </a-tooltip>
|
|
|
+ <template v-else>
|
|
|
+ <div
|
|
|
+ v-if="item.prefixColor"
|
|
|
+ class="tab-list_item-prefix"
|
|
|
+ :style="{ backgroundColor: item.prefixColor }"
|
|
|
+ />
|
|
|
+ <div :class="['tab-list_item-cnt']">
|
|
|
+ <span>{{ item.label }}</span>
|
|
|
+ <span
|
|
|
+ v-if="item.hasValue"
|
|
|
+ :style="{ color: selected == item.key ? '#ffffff' : item.valueColor || '#273240' }"
|
|
|
+ >
|
|
|
+ <span v-if="item.hasBracket">({{ item.value }})</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -57,6 +78,8 @@
|
|
|
prefixColor?: string | unknown;
|
|
|
// 后缀值颜色
|
|
|
valueColor?: string | unknown;
|
|
|
+ // 标头提示内容
|
|
|
+ toolTipTitle?: string | unknown;
|
|
|
}>;
|
|
|
}
|
|
|
const props = withDefaults(defineProps<Props>(), {
|