seecoder-devcloud-frontend/src/components/ProjectCard.vue

<template>
  <ElCard class="project-card" shadow="hover">
    <template #header>
      <span>{{name}}</span>
    </template>
    <div>描述：{{description}}</div>
    <el-tooltip class="item" effect="dark" :content="gitRemoteUrl + ' 点击复制'" placement="top">
      <div class="link" @click.stop="AddToClipboard(gitRemoteUrl)">链接：{{gitRemoteUrl}}</div>
    </el-tooltip>
  </ElCard>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    id: Number,
    name: String,
    description: String,
    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>

<style lang="scss" scoped>
.project-card {
  width: calc(25% - 24px);
  margin: 12px;
}
.link {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  width: 80%;
  cursor: pointer;
}
</style>