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

40 lines
1001 B
Vue

<template>
<el-tooltip placement="top" :persistent="!!imgs.length">
<template #content>
<template v-if="imgs && imgs.length > 0">
<img
v-for="(item, index) in imgs"
:key="item.imgFilesId || index"
v-viewer
:src="
item.filePath ? VITE_FILE_URL + item.filePath : VITE_FILE_URL + item
"
width="100"
height="100"
alt=""
class="ml-10"
/>
</template>
<span v-else>暂无图片</span>
</template>
<el-tag>预览</el-tag>
</el-tooltip>
</template>
<script setup>
import { ElTooltip, ElTag } from "element-plus";
import "element-plus/es/components/tooltip/style/css";
import "element-plus/es/components/tag/style/css";
import { getFileUrl } from "../../utils/index.js";
defineOptions({
name: "AppTooltipImg",
});
const VITE_FILE_URL = getFileUrl();
defineProps({
imgs: { type: Array, required: true },
});
</script>
<style scoped lang="scss"></style>