Vue自定义组件之图片缩放

    点击缩略图放大，查看原比例高清大图，是我们做完图片上传功能后经常需要遇到面对的问题，比如图片预览。虽然这个问题zoom.js这个现成插件可以帮我们解决，美中不足的是，zoom.js放大后的图片会受原img本身外层高宽限制，恰恰我们做缩略图往往会限制外层宽高以便多图呈现，并希望放大后的图片不受原img影响，基于这个问题，下面借助layer.js简单封装了一个Vue图片缩放组件。

目录

1.demo页面

2.组件核心：JS/CSS/辅助页面

3.demo演示

4.实现原理简述

---

1.demo页面

kt-zoom-demo.html

    
    
    
    
    
    
    



    
        

            KT-ZOOM-DEMO
            
                
                    
                
            
        

        

            
        
    

2.组件核心：JS/CSS/辅助页面

kt-zoom.js

document.write("");

Vue.component("kt-zoom", {
    template: `
      
      
    `,
    props: {
        src: String,
        custom: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        clickMe() {
            // const $ev = ev || event;
            // let src = $ev.target.getAttribute('src');
            let src = this.src || 'images/zhanwutupian.png';
            if (src.indexOf('=') !== -1) src = src.replace(/=/g, "%3D");
            layer.open({
                type: 2,
                title: false,
                closeBtn: 0,
                area: ['60%', '80%'],
                skin: 'layui-layer-nobg', //没有背景色
                shadeClose: true,
                content: `!!kt-zoom-img!!.html?src=${src}`
            });
        }
    }
});

kt-zoom.css

[v-cloak] {
    display: none !important;
}

.zoom-in {
    transition: width 1s, height 1s;
}

.zoom-in:hover {
    cursor: url("images/zoomin.ico"), auto;
}

.zoom-out {
    transition: width 1s, height 1s;
}

.zoom-out:hover {
    cursor: url("images/zoomout.ico"), auto;
}

.kt-zoom_wrap {
    /* 自身水平垂直居中 */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    /* 内部元素水平垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.kt-zoom_wrap img {
    max-width: calc(100% - 12px);
    max-height: calc(100% - 12px);
}

!!kt-zoom-img!!.html

3.demo演示

4.实现原理简述

1.通过layer弹出框插件，点击缩略图时，弹出辅助页面并传入src路径。
2.辅助页面放置img原图，设置max-width、max-height百分百并且水平垂直居中即可。
PS：完整demo以图包方式存放，右键 演示demo.gif 存储=》重命名xxx.rar=>解压即可。