js 基于element实现动态调用挂载实例图片预览功能

上代码：

import Vue from 'vue'
export default async function(urlList: string[], index = 0) {
    const ImageViewer = await import('element-ui/packages/image/src/image-viewer.vue')
    /** 创建响应式数据 */
    const data = Vue.observable({
        index,
        hide: false,
    })
    /** 创建虚拟节点 */
    const vm = new Vue({
        // 这里用的h 写法（看不懂可以去了解一下 vue render 的createdElement），也可以使用jsx，或者动态引入vue组件
        render: h =>
            h(
                'div',
                {
                    class: ['ImageViewerBox', style['ImageViewerBox'], { [style['ImageViewerBoxLeave']]: data.hide }],
                },
                [
                    h(ImageViewer.default, {
                        props: { urlList, initialIndex: data.index, onClose, onSwitch, zIndex: 9999 },
                        ref: 'ImageViewer',
                        style: {
                            bottom: `${urlList?.length > 1 ? 105 : 0}px`,
                        },
                    }),
                    h(
                        'ul',
                        {
                            class: [style['contraction-box']],
                            style: {
                                'animation-direction': data.hide ? 'reverse' : 'normal',
                            },
                        },
                        [
                            urlList?.length > 1 &&
                                urlList.map((i, index) =>
                                    h(
                                        'li',
                                        {
                                            key: index,
                                            class: [style['li'], { [style['li-show']]: index === data.index }],
                                            on: {
                                                click: () => upIndex(index),
                                            },
                                        },
                                        [
                                            h('img', {
                                                class: style['img'],
                                                attrs: {
                                                    src: i,
                                                },
                                            }),
                                        ],
                                    ),
                                ),
                        ],
                    ),
                ],
            ),
    }).$mount()
    /** 挂载实例 */
    document.querySelector('body')?.appendChild?.(vm.$el)
    /** 销毁组件 */
    function onClose() {
        setTimeout(() => {
            vm.$destroy()
            document.querySelector('body')?.removeChild(vm.$el)
        }, 280)
        data.hide = true
    }
    /** 监听组件index值变化 */
    function onSwitch(index) {
        data.index = index
    }
    /** 更新组件index */
    function upIndex(index) {
        ;(vm.$refs.ImageViewer as Vue).$data.index = index
    }
}

/** 
 * 使用方法：
 * $ImageViewer([url],index)
 * url 图片链接（以数组形式传入，单个[url],多个[url1,url2,url3]）
 * index 用于传入多个url时，初始显示图片的下标，不传默认0
*/