526互联

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

发布时间 2023-11-03 13:33:40作者: 崛起崛起
<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>