智能柜货柜二维码和刷新

src/components/PreviewImage/index.vue

@@ -1,14 +1,21 @@
 <!-- 图片预览 -->
 <script lang="ts" setup name="PreviewImage">
+import { useMessage } from "/@/hooks/message"
+import { downBlobFile } from "/@/utils/other"
+
 type Props = {
 	src?: string
 	width?: string | number
 	height?: string | number
+	download?: boolean | string
+	downloadName?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
 	width: 50,
 	height: 50,
+	download: false,
+	downloadName: "下载",
 })
 
 const realSrc = computed(() => {
@@ -28,25 +35,33 @@ function dispatchUrl(url?: string) {
 	if (!url) return ""
 	return url.includes("http") ? url : import.meta.env.VITE_IMAGE_BASE_PATH + url
 }
+
+// 图片下载
+const download = (src: string) => {
+	if (!src) return useMessage().error("图片链接不存在")
+	downBlobFile(src, {}, `${props.downloadName}.png`)
+}
 </script>
 
 <template>
-	<el-image
-		v-if="props.src"
-		hide-on-click-modal
-		preview-teleported
-		:src="`${realSrc}`"
-		fit="cover"
-		:style="`width:${realWidth};height:${realHeight};`"
-		:preview-src-list="realSrcList"
-		loading="lazy"
-	>
-		<template #error>
-			<div class="image-slot">
-				<i class="el-icon-picture-outline"></i>
-			</div>
-		</template>
-	</el-image>
+	<div v-if="props.src" class="flex flex-col items-center">
+		<el-image
+			hide-on-click-modal
+			preview-teleported
+			:src="`${realSrc}`"
+			fit="cover"
+			:style="`width:${realWidth};height:${realHeight};`"
+			:preview-src-list="realSrcList"
+			loading="lazy"
+		>
+			<template #error>
+				<div class="image-slot">
+					<i class="el-icon-picture-outline"></i>
+				</div>
+			</template>
+		</el-image>
+		<el-button v-if="props.download" size="small" type="primary" link @click="download(props.src)">下载</el-button>
+	</div>
 	<div v-else :style="`width:${realWidth};height:${realHeight};`" />
 </template>