vue图片预览组件

1.在src文件夹中建一个imageViewer文件夹,imageViewer文件夹中写入一个index.vue,index.vue代码如下

<template>
    <!-- 采用element-ui中的隐藏图片预览 -->
    <el-image-viewer v-if="imgViewerVisible" :on-close="closeImgViewer" :url-list="imgList" />
</template>

<script>
export default {
    name:'imageViewer',
    data: function () {
        return {
            imgViewerVisible: false, //图片预览的显示隐藏
            imgList: [], //图片list
        }
    },
    methods: {
        //预览图片时的方法
        showImgViewer(imgList) {
            this.imgList = imgList;
            this.imgViewerVisible = true;
            const m = (e) => { e.preventDefault() };
            document.body.style.overflow = 'hidden';
            document.addEventListener("touchmove", m, false); // 禁止页面滑动,因图片预览时,鼠标滚动,会导致页面的其他区域滚动.

            //提高图片预览组件的层级,因配合el-dialog中使用,会被其他的弹窗给覆盖
            setTimeout(() => {
                let image = document.getElementsByClassName("el-image-viewer__wrapper");
                image[0].style['z-index'] = '2050';
            }, 100)

        },
        //预览图片结束时的方法
        closeImgViewer() {
            this.imgViewerVisible = false;
            const m = (e) => { e.preventDefault() };
            document.body.style.overflow = 'auto';
            document.removeEventListener("touchmove", m, true); //移除禁止页面滑动的方法
        },
    },
    // 注册组件
    components: { 'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer') }
}
</script>

<style></style>

2.在imageViewer文件夹中写入一个index.js,index.js代码如下

import Vue from 'vue'
import imageViewer from './index.vue'

Vue.prototype.$imageViewer = function (options) {
    // 判断传入的参数是否为数组
    let urlList = Array.isArray(options) ? options : [options];
    var imageViewer1 = Vue.extend(imageViewer)
    var component = new imageViewer1().$mount()
    document.body.appendChild(component.$el)
    Vue.nextTick(() => {
        component.showImgViewer(urlList)
    })
}
imageViewer.install = function (Vue) {
    Vue.component(imageViewer.name, imageViewer)
}
export default imageViewer

3.在main.js中进行引入注册

import imageViewer from '@/components/imageViewer/index.js'
Vue.use(imageViewer)

4.在其他页面进行使用调用

// html中
<el-button @click="imgShow">图片预览</el-button>

methods:{
     imgShow() {
            let url = 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg
            this.$imageViewer(url)
     },
}