图片预览功能实现，放大缩小(el-image-viewer)

<template>
    <div>
        <div v-for="(item, index) in list" :key="index" class="box">
            <img :src="item" alt="" @click="onPreview(item)" />
        </div>
        <el-image-viewer
            v-if="showViewer"
            :on-close="closeViewer"
            :url-list="imgList"
        />
    </div>
</template>
<script>
export default {
    data() {
        return {
            showViewer: false,
            list: [
                "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
                "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
            ],
            imgList: [],
        };
    },
    components: {
        "el-image-viewer": () =>
            import("element-ui/packages/image/src/image-viewer"),
    },
    methods: {
        closeViewer() {
            this.showViewer = false;
            this.imgList = [];
        },
        // 点击按钮预览图片
        onPreview(img) {
            this.showViewer = true;
            this.imgList.push(img);
        },
    },
};
</script>
<style lang="less" scoped>
.box {
    img {
        height: 500px;
    }
}
</style>

<template>
    <div>
        <div v-for="(item, index) in list" :key="index" class="box">
            <el-image
                style="width: 500px; height: 500px"
                :src="item"
                :fit="fit"
                :preview-src-list="[list[index].url]"
            >
            </el-image>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            showViewer: false,
            list: [
                {
                    url: "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
                    name: "第一张图片",
                },
                {
                    url: "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
                    name: "第二张图片",
                },
            ],
        };
    },
};
</script>

第一个代码和第二个代码的效果是一样的，
只是第一个代码可以自定义打开预览和关闭预览做什么操作，

就比如在此次项目中打开和关闭预览需要调用dialogDom和dialogClose方法。
所以用的第一种方式实现预览。