vue实现通过点击按钮预览图片（第二种方法）

上篇适合项目中多个页面使用按钮实现大图预览的场景，一次封装多次使用。今天介绍一款简单的方式，适合在单个页面中使用，话不多说，直接上代码。

// 按钮
<el-button type="success" size="small" @click="openPreiview">查看</el-button>

// 预览图片组件
<el-image-viewer v-if="showImagePreview" :url-list="previewList" hide-on-click-modal teleported :on-close="closePreview"  style="z-index:3000" />

<script>
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
    components: {
        ElImageViewer
    },
    data() {
        return {
            showImagePreview: false,
            previewList:[],
        }
    },
    methods: {
        openPreiview() {
            this.previewList=[require('@/assets/images/picture1.png'), require('@/assets/images/picture2.png')]
            document.body.style.overflow = 'hidden';
            this.showImagePreview= true
        },
        closePreview() {
            this.showImagePreview= false;
            document.body.style.overflow = 'auto';
        },
      
    },
}
</script>