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

<template>
  <ElCard class="project-card" shadow="hover">
    <template #header>
      <span>{{name}}</span>
    </template>
    <div>描述：{{description}}</div>
    <ElTooltip class="item" effect="dark" :content="gitRemoteUrl" placement="top">
      <div class="link">链接：<ElLink class="url" @click.stop.prevent="copy(gitRemoteUrl)">{{gitRemoteUrl}}</ElLink></div>
    </ElTooltip>
  </ElCard>
</template>

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

import { copy } from '@/utils/clipboard';

export default defineComponent({
  props: {
    id: Number,
    name: String,
    description: String,
    gitRemoteUrl: String,
    groupId: Number,
  },
  methods: {
    copy,
  },
});
</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>