From c675b1ec483086ea922e47e1d839092d8a647ea6 Mon Sep 17 00:00:00 2001
From: odjbin <1042039504@qq.com>
Date: Sat, 18 May 2024 23:04:51 +0800
Subject: [PATCH] =?UTF-8?q?fix=20:=20=E4=BF=AE=E5=A4=8Dtooltip=E7=BB=86?=
 =?UTF-8?q?=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Tooltip.vue                    | 40 +++++++++++++++++++
 .../process/common/AvatarEllipsis.vue         | 14 ++-----
 2 files changed, 43 insertions(+), 11 deletions(-)
 create mode 100644 src/components/Tooltip.vue

diff --git a/src/components/Tooltip.vue b/src/components/Tooltip.vue
new file mode 100644
index 0000000..3d50dc8
--- /dev/null
+++ b/src/components/Tooltip.vue
@@ -0,0 +1,40 @@
+<template>
+  <el-tooltip
+      effect="dark"
+      :content="props.content"
+      placement="bottom-start"
+      :disabled="isShow"
+  >
+    <div class="content" :style="{width: props.width+'px'}" @mouseover="isShowTooltip">
+      <span ref="contentRef">
+        <slot name="content">{{ props.content }}</slot>
+      </span>
+    </div>
+  </el-tooltip>
+</template>
+<script setup>
+const props = defineProps({
+  content: {
+    type: String,
+    default: ''
+  }, width: {
+    type: String,
+    default: ''
+  }
+})
+const contentRef = ref()
+const isShow = ref(false)
+const isShowTooltip = () => {
+  isShow.value = props.width > contentRef.value.offsetWidth;
+}
+</script>
+<style>
+.content {
+  width: 45px;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  padding-top: 3px;
+}
+</style>
diff --git a/src/views/workflow/process/common/AvatarEllipsis.vue b/src/views/workflow/process/common/AvatarEllipsis.vue
index 78b6206..b71c2ae 100644
--- a/src/views/workflow/process/common/AvatarEllipsis.vue
+++ b/src/views/workflow/process/common/AvatarEllipsis.vue
@@ -6,9 +6,8 @@
     <div style="display: flex;flex-wrap: wrap;">
       <div v-for="(user,index) in userInfo" :key="index" class="avatar_name">
         <div class="circle-user">
-          <el-tooltip class="item" effect="dark" :content="user.name" placement="bottom-start">
-            <span class="item_name">{{ user.name }}</span>
-          </el-tooltip>
+          <Tooltip :content="user.name" placement="bottom-start" width="45">
+          </Tooltip>
         </div>
         <div v-if="user.icon"
              class="el-timeline-item__node" :style="{
@@ -47,6 +46,7 @@ const props = defineProps({
 })
 
 const init = () => {
+  console.log('props.userInfo',props.userInfo)
   for (let user of props.userInfo) {
     initUser(user)
   }
@@ -121,12 +121,4 @@ init()
   right: 1px;
 }
 
-.item_name {
-  width: 45px;
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  padding-top: 3px;
-}
 </style>