Vue3封装图片流形式单张图片预览

图片预览组件：

<template>
    <!-- element-plus内置图片预览组件 -->
    <el-image-viewer 
        v-if="viewerImage.visible" 
        :urlList="viewerImage.urlList" 
        @close="closeViewer"
    />
</template>

<script setup>
import { reactive } from "vue";
import { ElLoading } from 'element-plus'

const viewerImage = reactive({
    visible: false,
    urlList: [],
})

// 关闭
const closeViewer = () => {
    viewerImage.visible = false;
    // 释放ObjectUrl类型的内存
    viewerImage.urlList.forEach(src => {
        if(src.includes('blob')) {
            URL.revokeObjectURL(src);
        }
    })
}

// 外部以api的形式调用，单张图片预览
const view = (src) => {
    if(src) {
        viewerImage.urlList = [src];
        viewerImage.visible = true;
    }
}

// 外部调用loading
let loading = null;
const setLoading = (isLoading) =