Merge pull request 'fix : 修复tooltip细节' (#199) from dj into master

Reviewed-on: http://git.feashow.cn/clay/mosr-web/pulls/199

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>

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>