element ui 大图预览函数式调用

上代码

import ImageViewer from 'element-ui/packages/image/src/image-viewer.vue';
import Vue, {defineComponent} from "vue";
import download from "@/plugins/download";

/**
 *  @description 图片预览
 *  @param {Object} options
 *  @param {Boolean} [options.showDownload] 是否显示下载按钮
 *  @param {Function} [options.customDownload] 自定义下载方法
 *  @param {Array} options.urlList 图片地址列表
 *  @param {Number} [options.zIndex] z-index 默认9999
 *  @param {Array<Function>} [options.actions] 返回VNodes的数组 自定义操作按钮
 *  @returns {Vue}
 */
function create(options) {
    const {
        showDownload = true,
        customDownload = (url) => {
            download.urlDownload(url, Date.now() + url.substring(url.lastIndexOf('.')))
        },
        urlList,
        zIndex = 9999,
        actions = [],
    } = options;
    if (showDownload) {
        actions.unshift(() => <i class="el-icon-download" onClick={() => customDownload(instance.currentImg)}/>)
    }


    const Profile = Vue.extend(ImageViewer);
    const instance = new Profile({
        propsData: {
            urlList,    
            zIndex,
            onClose: destroy
        }
    });

    const container = document.createElement('div');
    document.body.appendChild(container);
    instance.$mount(container);

    const iconInstances = []

    Vue.nextTick(() => {
        const actionInner = instance.$el.querySelector('.el-image-viewer__actions__inner');
        actions.forEach(action => {
            const ActionIconComp = Vue.extend(defineComponent({
                setup() {
                    return () => action()
                }
            }));
            const iconInstance = new ActionIconComp();
            iconInstance.$mount();
            iconInstances.push(iconInstance);
            actionInner.appendChild(iconInstance.$el)
        })
    })

    function destroy() {
        iconInstances.forEach(iconInstance => iconInstance.$destroy());
        instance.$destroy();
        container.remove()
    }

    instance.destroy = destroy
    return instance;
}

export default {create};

使用示例

import ImageViewer from './image-viewer.js';

// instance 可以获取 'element-ui/packages/image/src/image-viewer.vue'的实例
// instance.currentImg 获取当前图片url
const instance = ImageViewer.create({
    urlList: [
        'https://****.jpg',
        'https://****.jpg',
    ],
    actions: [
        () => <i class="el-icon-s-tools" onClick={() => {
            console.log('instance.currentImg', instance.currentImg)
        }}/>
    ]
});