Element UI 图片预览组件（el-image-viewer）

Element UI 的图片组件 el-image 有大图预览的功能，可通过 previewSrcList 开启预览大图的功能：

<el-image 
    style="width: 100px; height: 100px"
    :src="url" 
    :preview-src-list="srcList">
</el-image>

el-image-viewer

其实大图预览是一个单独的组件 image-viewer，所以我们可以单独使用：

相关 props:

props: {
    urlList: {
        type: Array,
        default: () => []
    },
    zIndex: {
        type: Number,
        default: 2000
    },
    onSwitch: {
        type: Function,
        default: () => {}
    },
    onClose: {
        type: Function,
        default: () => {}
    }
}

这里只需要关注 urlList 和 onClose。

使用：

1、引入组件并注册：

import ElImageViewer from "element-ui/packages/image/src/image-viewer";

components: {
    ElImageViewer
}

2、template：

<el-image-viewer
    v-if="showViewer"
    :on-close="closeViewer"
    :url-list="[viewUrl]">
</el-image-viewer>

3、script:

data() {
    return {
      showViewer: false,
      viewUrl: "",  // 图片预览地址
    };
},
methods: {
    closeViewer() {
        this.showViewer = false;
    },
    goRead() {
        // ...
        if (['.png', '.jpg', '.gif', '.jpeg', '.webp'].indexOf(file.format) > -1) {
            this.viewUrl = file.downUrl;
            this.showViewer = true;
        }
        // ...
    }
}