自定义组件

// 图片预览组件
const Imgview = {
    template: `
        <el-image-viewer v-if="showViewer" :initial-index="initialIndex" hide-on-click-modal :url-list="previewList" @close="showViewer = false"></el-image-viewer>
    `,
    props: {
     
    },
    data() {
        return {
           showViewer:false,
           initialIndex:0, //图片索引
           previewList:[], //所有图片地址
        }
    },
    methods: {
        preViewImg(src,index=0){
            this.initialIndex = index;
            this.previewList = [src];
            this.showViewer = true;
        }
    }
};

引入组件

const app = Vue.createApp(App);
app.component('custom-imgview', Imgview);

app.mount("#app");

  <!-- 自定义图片预览组件 -->
 <custom-imgview ref="imgview"></custom-imgview>

调用

 this.$refs.imgview.preViewImg(src);