From 2362ece5fe97b15ca6f48de325dbf8d0960c73bd Mon Sep 17 00:00:00 2001
From: KDZhu <carlchu0113@gmail.com>
Date: Fri, 18 Oct 2024 14:29:12 +0800
Subject: [PATCH] =?UTF-8?q?feat(member-selector):=20=E7=BB=B4=E6=8A=A4?=
 =?UTF-8?q?=E4=BA=BA=E5=91=98=E6=96=87=E6=9C=AC=E7=9A=84tooltips=20#=20Rev?=
 =?UTF-8?q?iewed,=20transaction=20id:=2021233?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../gateways-edit/member-selector.vue         | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/dashboard-front/src/components/gateways-edit/member-selector.vue b/src/dashboard-front/src/components/gateways-edit/member-selector.vue
index d6d408be5..ba95b66ea 100644
--- a/src/dashboard-front/src/components/gateways-edit/member-selector.vue
+++ b/src/dashboard-front/src/components/gateways-edit/member-selector.vue
@@ -4,9 +4,9 @@
       <div class="edit-wrapper">
         <div class="edit-content">
           <slot>
-            <template v-if="displayValue.length">
-              <span v-for="(item, index) in displayValue" :key="index" class="member-item">
-                {{ displayValue.length > 1 && index !== displayValue.length - 1 ? `${item}，` : item }}
+            <template v-if="membersText">
+              <span class="member-item" v-bk-tooltips="{ content: membersText, placement: 'top-start' }">
+                {{ membersText }}
               </span>
             </template>
             <template v-else>--</template>
@@ -170,6 +170,10 @@ const isEditMode = computed(() => {
   return props.mode === 'edit';
 });
 
+const membersText = computed(() => {
+  return displayValue.value.join(', ');
+});
+
 watch(
   () => props.content,
   (payload: any[]) => {
@@ -219,13 +223,12 @@ onBeforeMount(() => {
       line-height: 32px;
 
       .member-item {
-        display: inline-block;
-        // padding: 0 10px;
-        // margin: 2px 0 2px 6px;
         line-height: 32px;
-        // border-radius: 2px;
-        // background: #f0f1f5;
         font-size: 12px;
+        width: calc(100% - 25px);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
 
         i {
           font-size: 18px;