Sfoglia il codice sorgente

feat: 首页项目卡片中链接修改,过长时显示省略号,点击链接可复制

Cyt928 5 anni fa
parent
commit
519d6fb27c
1 ha cambiato i file con 29 aggiunte e 1 eliminazioni
  1. 29 1
      src/components/ProjectCard.vue

+ 29 - 1
src/components/ProjectCard.vue

@@ -4,7 +4,9 @@
       <span>{{name}}</span>
     </template>
     <div>描述:{{description}}</div>
-    <div>链接:{{gitRemoteUrl}}</div>
+    <el-tooltip class="item" effect="dark" :content="gitRemoteUrl + ' 点击复制'" placement="top">
+      <div class="link" @click.stop="AddToClipboard(gitRemoteUrl)">链接:{{gitRemoteUrl}}</div>
+    </el-tooltip>
   </ElCard>
 </template>
 
@@ -19,6 +21,25 @@ export default defineComponent({
     gitRemoteUrl: String,
     groupId: Number,
   },
+  methods: {
+    AddToClipboard(text: string) {
+      const textarea = document.createElement('textarea');
+      textarea.innerHTML = text;
+      textarea.value = text;
+      document.body.appendChild(textarea);
+      textarea.select();
+      try {
+        if (document.execCommand('Copy')) {
+          alert('复制成功!');
+        } else {
+          alert('复制失败!');
+        }
+      } catch (err) {
+        alert('复制失败!');
+      }
+      document.body.removeChild(textarea);
+    },
+  },
 });
 </script>
 
@@ -27,4 +48,11 @@ export default defineComponent({
   width: calc(25% - 24px);
   margin: 12px;
 }
+.link {
+  white-space:nowrap;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  width: 80%;
+  cursor: pointer;
+}
 </style>