iview vue图片预览插件

引自：laii7/vue查看图片插件，略作修改，添加了缩放旋转功能。若未使用iview组件，请将ImageViewer.vue中图标Icon换掉，以免报错。

1. 目录结构

image.png

2. 代码如下

// config.js，可以根据个人需求进行设置以下选项
export default {
    canClickModalHide: false,         //控制是否点击遮罩层关闭
    closeButtonVisible: true,         //控制关闭按钮是否可见，若设置为false则canClickModalHide必定为true
    modalOpacity: 0.5,                //控制遮罩层的透明度（0-1之间的number类型）
    controlButtonVisible: true,       //控制按钮是否可见
}

// ImageViewer.vue

// index.js
import ImageViewerComponent from './ImageViewer'
const ImageViewer = {}
ImageViewer.install = Vue => {
    const ImageViewerConstructor = Vue.extend(ImageViewerComponent);
    const instance = new ImageViewerConstructor();
    instance.$mount(document.createElement('div'))
    document.body.appendChild(instance.$el)
    //自定义拖动
    Vue.directive('drag',
        function (el, binding) {
            instance.isShowImageDialog = true;
            let oDiv = el;   //当前元素
            oDiv.onmousedown = function (e) {
                if (e.button === 2) return;
                e.preventDefault();
                let bw = document.body.clientWidth;
                let bh = document.body.clientHeight;
                //鼠标按下，计算当前元素距离可视区的距离
                let disX = e.clientX - oDiv.offsetLeft;
                let disY = e.clientY - oDiv.offsetTop;
                document.onmousemove = function (e) {
                    //通过事件委托，计算移动的距离
                    let l = 0, t = 0;
                    // 拖动边界
                    if (e.clientX >= bw) {
                        l = bw - disX;
                    } else if (e.clientX <= 0) {
                        {
                            l =0- disX;
                        }
                    } else {
                        l = e.clientX - disX;
                    }
                    if (e.clientY >= bh) {
                        t = bh - disY;
                    }else if(e.clientY <= 0) {
                        t =0- disY;
                    }
                    else {
                        t = e.clientY - disY;
                    }
                    //移动当前元素
                    oDiv.style.left = l + 'px';
                    oDiv.style.top = t + 'px';
                    //将此时的位置传出去
                    binding.value({x: e.pageX, y: e.pageY})
                };
                // 事件移除
                document.onmouseup = function (e) {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };
            };
        }
    );
    // 挂载触发方法
    Vue.prototype.$imageViewer = (e) => {
        instance.currentImg = e.currentTarget.currentSrc;
        instance.visible = true;
    }
}
export default ImageViewer;

3. 使用

// vue项目的main.js文件中引用，注意由于组件中用到了ivew相关组件，请放在iview之后引用

import imageViewer from '@/components/vue-imageViewer-master' // 图片查看
Vue.use(imageViewer);

// 组件中直接添加 @click="$imageViewer" 即可

4. 效果图

image.png