浏览代码

fix: 加入浮动提示

Tong 2 年之前
父节点
当前提交
883e21743c
共有 1 个文件被更改,包括 37 次插入14 次删除
  1. 37 14
      src/components/XTTab/src/XTTab.vue

+ 37 - 14
src/components/XTTab/src/XTTab.vue

@@ -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>(), {