update 解决项目列表卡片按钮下拉问题

src/tenants/lyric/views/project/projectCard.vue

@@ -20,16 +20,19 @@
       </span>
     </div>
 
-    <el-dropdown class="options-dropdown" :teleported="false">
+    <el-dropdown
+      class="options-dropdown"
+      :class="{ 'is-visible': isDropdownVisible }"
+      @command="handleCommand"
+      @visible-change="handleVisibleChange"
+    >
       <div class="options-btn" @click.stop>
         <el-icon :size="18"><MoreFilled /></el-icon>
       </div>
       <template #dropdown>
-        <el-dropdown-menu @click.stop>
+        <el-dropdown-menu>
-          <el-dropdown-item v-for="(action, aIndex) in actionList" :key="aIndex">
+          <el-dropdown-item v-for="(action, aIndex) in actionList" :key="aIndex" :command="action">
-            <el-link :type="action.type" @click.stop="actionClickFun(action)">
+            <el-link :type="action.type">{{ action.title }}</el-link>
-              {{ action.title }}
-            </el-link>
           </el-dropdown-item>
         </el-dropdown-menu>
       </template>
@@ -38,7 +41,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { MoreFilled } from '@element-plus/icons-vue';
 import { useDict } from '@/utils/useDict';
 import { PROJECT_EXE_STATUS_CODE } from '@/utils/enum/project';
@@ -79,8 +82,15 @@ const cardClickFun = () => {
   emit('cardClick', props.project);
 };
 
-const actionClickFun = (action: any) => {
+// const actionClickFun = (action: any) => {
-  emit('actionClick', props.project, action);
+//   emit('actionClick', props.project, action);
+// };
+const handleCommand = (command: any) => {
+  emit('actionClick', props.project, command);
+};
+const isDropdownVisible = ref(false);
+const handleVisibleChange = (visible: boolean) => {
+  isDropdownVisible.value = visible;
 };
 </script>
 
@@ -101,6 +111,10 @@ const actionClickFun = (action: any) => {
       transform: scale(1.1);
     }
   }
+  &:hover .options-dropdown,
+  .options-dropdown.is-visible {
+    opacity: 1;
+  }
 
   .cover-img {
     transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);

src/views/task/projectList/components/projectCard.vue

@@ -1,13 +1,18 @@
 <template>
   <div class="project-card" @click="cardClickFun">
-    <el-dropdown class="options-dropdown" :teleported="false">
+    <el-dropdown
+      class="options-dropdown"
+      :class="{ 'is-visible': isDropdownVisible }"
+      @command="handleCommand"
+      @visible-change="handleVisibleChange"
+    >
       <div class="options-btn" @click.stop>
         <el-icon :size="18"><MoreFilled /></el-icon>
       </div>
       <template #dropdown>
         <el-dropdown-menu>
-          <el-dropdown-item v-for="(action, aIndex) in actionList" :key="aIndex">
+          <el-dropdown-item v-for="(action, aIndex) in actionList" :key="aIndex" :command="action">
-            <el-link :type="action.type" @click.stop="actionClickFun(action)">
+            <el-link :type="action.type">
               {{ action.title }}
             </el-link>
           </el-dropdown-item>
@@ -15,7 +20,11 @@
       </template>
     </el-dropdown>
 
-    <img class="gl-pointer-class cover-img" :src="coverImgMap[project.detailImgUrl ? 'custom' : (index % 2 !== 0 ? 'blue' : 'green')]" alt="" />
+    <img
+      class="gl-pointer-class cover-img"
+      :src="coverImgMap[project.detailImgUrl ? 'custom' : index % 2 !== 0 ? 'blue' : 'green']"
+      alt=""
+    />
 
     <div class="bottom-box">
       <span class="gl-text-ellipsis gl-pointer-class" :title="project.nodeName">
@@ -29,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import { MoreFilled } from '@element-plus/icons-vue';
 import { useDict } from '@/utils/useDict';
 import { PROJECT_EXE_STATUS_CODE } from '@/utils/enum/project';
@@ -70,8 +79,15 @@ const cardClickFun = () => {
   emit('cardClick', props.project);
 };
 
-const actionClickFun = (action: any) => {
+// const actionClickFun = (action: any) => {
-  emit('actionClick', props.project, action);
+//   emit('actionClick', props.project, action);
+// };
+const handleCommand = (command: any) => {
+  emit('actionClick', props.project, command);
+};
+const isDropdownVisible = ref(false);
+const handleVisibleChange = (visible: boolean) => {
+  isDropdownVisible.value = visible;
 };
 </script>
 
@@ -80,5 +96,9 @@ const actionClickFun = (action: any) => {
 
 .project-card {
   @extend .project-card-base;
+  &:hover .options-dropdown,
+  .options-dropdown.is-visible {
+    opacity: 1;
+  }
 }
 </style>