<template>
? ? <div class="previewImg" @click="dialogVisible = true">
? ? ? ? <slot>
? ? ? ? ? ? <img :src="props.src" alt="圖片加載失敗" />
? ? ? ? </slot>
? ? </div>
? ? <el-dialog v-model="dialogVisible" title="查看圖片" @close="close">
? ? ? ? <img :src="imgSrc" alt="Preview Image" style="max-width: 100%" />
? ? </el-dialog>
</template>
<script setup lang="ts">
? ? import { ref, getCurrentInstance, ComponentInternalInstance, onMounted } from 'vue'
? ? import { ElDialog } from 'element-plus'
? ? const props = defineProps({
? ? ? ? src: String
? ? })
? ? const dialogVisible = ref(false)
? ? const imgSrc = ref('')
? ? // 插槽形式
? ? onMounted(() => {
? ? ? ? const { proxy } = getCurrentInstance() as ComponentInternalInstance
? ? ? ? let slot = proxy?.$slots?.default?.()
? ? ? ? if(slot){
? ? ? ? ? ? // 獲取插槽內(nèi)容設(shè)置imgSrc地址
? ? ? ? ? ? imgSrc.value = slot?.[0]?.props?.src
? ? ? ? }
? ? })
? ? const setSrc = (v: string) => {
? ? ? ? imgSrc.value = v
? ? }
? ? // 組件觸發(fā)
? ? if (props.src) {
? ? ? ? setSrc(props.src)
? ? }
? ? // 指令觸發(fā)
? ? const show = () => {
? ? ? ? dialogVisible.value = true
? ? }
? ? const close = () => {?
? ? ? ? // 彈窗關(guān)閉移除dom
? ? ? ? if (document.getElementById('previewDom')) {
? ? ? ? ? ? document.body.removeChild(document.getElementById('previewDom') as HTMLElement)
? ? ? ? }
? ? }
? ? defineExpose({
? ? ? ? show,
? ? ? ? setSrc
? ? })
</script>

import { Component, createApp } from 'vue'
import PreviewImageVue from '@/components/PreviewImage.vue'
function mountComponent(RootComponent: Component) {
? ? const app = createApp(RootComponent)
? ? const root = document.createElement('div')
? ? root.setAttribute('id', 'previewDom')
? ? document.body.appendChild(root)
? ? return {
? ? ? ? instance: app.mount(root),
? ? ? ? unmount() { // 這里unmout沒(méi)用到，因?yàn)榻M件中dialog的close事件這里監(jiān)聽(tīng)不到，我就在組件內(nèi)進(jìn)行卸載了
? ? ? ? ? ? console.log('unmount')
? ? ? ? ? ? document.body.removeChild(root)
? ? ? ? }
? ? }
}
const preview = {
? ? mounted(el: any) {
? ? ? ? el.style.cursor = 'zoom-in'
? ? ? ? el.addEventListener('click', () => {
? ? ? ? ? ? let imgSrc = el.getAttribute('src')
? ? ? ? ? ? let { instance, unmount } = mountComponent(PreviewImageVue)
? ? ? ? ? ? ;(instance as any).setSrc(imgSrc)
? ? ? ? ? ? ;(instance as any).show()
? ? ? ? })
? ? }
}
export default preview

<div class="imgs">
? ? <!-- 普通圖片 -->
? ? <img src="~@/assets/images/logo.png" alt="">
? ? <!-- 組件形式使用預(yù)覽組件、需要注意路徑（使用絕對(duì)路徑） -->
? ? <PreviewImage src="/src/assets/images/logo.png"></PreviewImage>
? ? <!-- 組件插槽形式預(yù)覽組件、需要注意路徑（使用絕對(duì)路徑） -->
? ? <PreviewImage>
? ? ? ? <img src="/src/assets/images/logo.png" alt="">
? ? </PreviewImage>
? ? <!-- 指令使用預(yù)覽組件 -->
? ? <img src="~@/assets/images/logo.png" alt="" v-preview>
</div>