<template>
    <el-image-viewer v-if="show" v-bind="$attrs" hide-on-click-modal @close="show = false" />
</template>
<script setup>
import { ref, watch } from "vue"
import { ElImageViewer } from "element-plus" //自定義函數(shù)組件無法使用全局組件，需要單獨引入
const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    remove: {
        type: Function, //傳入createApp中移除節(jié)點的方法
        default: null,
    },
    // api文檔：https://element-plus.org/zh-CN/component/image.html#image-viewer-attributes
})
const show = ref(props.visible)
// 監(jiān)聽顯示的消失，需要移除dom
watch(() => show.value, (val) => {
    !val && props.remove()
})
</script>

import { createApp } from 'vue'
import index from './index.vue'
export default (options) => {
    // 創(chuàng)建一個節(jié)點，并將組件掛載上去
    const root = document.createElement('div')
    document.body.appendChild(root)
    const app = createApp(index, {
        ...options, visible: true, remove() {
            app.unmount(root) //創(chuàng)建完后要進行銷毀
            document.body.removeChild(root)
        }
    })
    return app.mount(root)
}

import previewImage from "@/fcComponents/previewImage"
previewImage({ urlList: ["https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"] })