dianshang-qianduan/src/views/components/TrainingMaterialButton.vue

<template>
  <el-button class="material-download" :plain="!material?.url" @click="handleDownload">
    <el-icon><Download /></el-icon>
    {{ material?.name || "案例文档" }}
  </el-button>
</template>

<script setup>
import { computed } from "vue";
import { ElMessage } from "element-plus";
import { Download } from "@element-plus/icons-vue";

const props = defineProps({
  materialName: {
    type: String,
    default: "",
  },
  materialUrl: {
    type: String,
    default: "",
  },
});

const material = computed(() => {
  const name = String(props.materialName || "").trim();
  const url = String(props.materialUrl || "").trim();
  if (!name || !url || (name === "案例资料.rar" && url === "/file/example.rar")) {
    return null;
  }
  return { name, url };
});

function handleDownload() {
  if (!material.value?.url) {
    ElMessage.warning("暂无案例文档");
    return;
  }
  const link = document.createElement("a");
  link.href = material.value.url;
  link.target = "_blank";
  link.rel = "noopener";
  link.download = material.value.name;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
</script>

<style lang="scss" scoped>
.material-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 260px;
  min-height: 40px;
  padding: 0 18px;
  border-color: rgba(99, 217, 255, 0.55);
  border-radius: 999px;
  color: #e9fbff;
  background: rgba(17, 126, 178, 0.36);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  box-shadow: none;
}

.material-download:hover {
  transform: translateY(-1px);
  color: #e9fbff;
  border-color: rgba(116, 235, 255, 0.85);
  background: rgba(18, 146, 204, 0.5);
}
</style>