You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.5 KiB
Vue
66 lines
1.5 KiB
Vue
2 months ago
|
<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 {
|
||
|
|
max-width: 260px;
|
||
|
|
min-height: 40px;
|
||
|
|
border-color: rgba(97, 219, 255, 0.55);
|
||
|
|
border-radius: 6px;
|
||
|
|
color: #a9ecff;
|
||
|
|
background: rgba(7, 54, 78, 0.72);
|
||
|
|
font-weight: 800;
|
||
|
|
}
|
||
|
|
|
||
|
|
.material-download:hover {
|
||
|
|
color: #ffffff;
|
||
|
|
border-color: rgba(119, 232, 255, 0.92);
|
||
|
|
background: rgba(10, 82, 116, 0.82);
|
||
|
|
}
|
||
|
|
</style>
|