zy-vue-library/components/preview_pdf/index.vue

46 lines
1.2 KiB
Vue
Raw Permalink Normal View History

2025-10-22 11:19:51 +08:00
<template>
<div v-if="file.length === 0 && name && url">
{{ name }}
<el-button type="primary" size="small" class="ml-5" @click="fnPreviewPdf(url)">
预览
</el-button>
</div>
<template v-if="file.length > 0 && !name && !url">
<div v-for="(item, index) in file" :key="index" class="mt-5">
{{ item.name || item.fileName || item[nameKey] }}
<el-button type="primary" size="small" class="ml-10" @click="fnPreviewPdf(item.filePath || item[urlKey])">
预览
</el-button>
</div>
</template>
<app-pdf v-model:visible="pdfDialog.visible" :src="pdfDialog.src" />
</template>
<script setup>
import { ref } from "vue";
import { ElButton } from "element-plus";
import "element-plus/es/components/button/style/css";
import AppPdf from "../pdf/index.vue";
defineOptions({
name: "AppPreviewPdf",
});
defineProps({
file: { type: Array, default: () => [] },
nameKey: { type: String, default: "" },
urlKey: { type: String, default: "" },
name: { type: String, default: "" },
url: { type: String, default: "" },
});
const pdfDialog = ref({
visible: false,
src: "",
});
const fnPreviewPdf = (src) => {
pdfDialog.value.visible = true;
pdfDialog.value.src = src;
};
</script>
<style scoped lang="scss"></style>