vue 滚动缩放反转图片功能

 核心代码,创建image对象,获取图片的大小,设置高宽比,监听滚轮控制图片比

<style lang="less" scoped>
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    .img-max100{
        max-width: 337px;
        max-height: 217px;
        /* height: 160px;
        width: 165px; */
        cursor:pointer;
    }
    .flexcenter{
        display: -webkit-flex!important;
        display: flex!important;
        justify-content:center
    }
</style>
<template>

<Modal v-model="showOriginImg" :width="width" :loading="loading">
   <div slot="footer">
      <ButtonGroup class="flexcenter">
         <Button @click="rotate(-90)" type="primary" size="small">
            <Icon :size="14" type="md-return-left"></Icon></Button>
         <Button @click="rotate(90)" type="primary" size="small">
            <Icon :size="14" type="md-return-right"></Icon>
         </Button>
         <Button @click="zoom(0.5)" type="primary" size="small">
            <Icon :size="14" type="md-add"></Icon>
         </Button>
         <Button @click="zoom(-0.5)" type="primary" size="small">
            <Icon :size="14" type="md-remove"></Icon>
         </Button>
       </ButtonGroup>
    </div>
    <!-- <div slot="header"></div> -->
    <div class="flexcenter">
       <img :id="imgId" :src="url">
    </div>
</Modal>
</template>

<script>
    import imgerror from "@/images/main/imgerror.png"
    import util from "@/libs/util.js"
    import $ from 'jquery';
    export default {
        props:{
            src:String
        }, // 父组件传过来所需的url
        data() {
            return {
                newimgerror:imgerror,
                loading:true,
                showOriginImg:false,
                width:'280px',
                url: imgerror, // 先加载loading.gif
                imgId: 'image'+Math.ceil(Math.random()*1000000),
                imgProp:{
                    imgwidth:240,
                    imgheight:200,
                    zoom:0,
                    deg:0,
                },
                newurl:imgerror, // 先加载loading.gif,
            }
        },
        methods:{
            loadImg(){
                var _this = this;
                var newImg = new Image();
                if(_this.src){
                    //存在多张图片时,pop显示第一张,点击打开弹窗显示第二张
                    if(_this.src.indexOf(';')>=0){
                        let newsrc = _this.src.split(';')
                        newImg.src = newsrc[1];
                        _this.newurl = newsrc[0];
                        
                        if(newsrc[1] && newsrc[1] != ''){
                            newImg.onload = () => { // 图片加载成功后把地址给原来的img
                                _this.loading=false;
                                
                                _this.url = newsrc[1];

                                _this.imgProp.imgwidth = 500;
                                _this.imgProp.imgheight = (500*newImg.height)/newImg.width;

                                $('#'+_this.imgId).width(_this.imgProp.imgwidth);
                                $('#'+_this.imgId).height(_this.imgProp.imgheight);


                                _this.initWidth(_this.imgProp.imgwidth,_this);
                            }
                            newImg.onerror = () => {    // 图片加载错误时的替换图片
                                _this.loading = false;
                                _this.newurl = imgerror;
                                _this.url = imgerror;

                                _this.imgProp.imgwidth = 240;
                                _this.imgProp.imgheight = 200;
                                _this.initWidth(240,_this);
                            };
                        }else{
                            newImg.onload = () => { // 图片加载成功后把地址给原来的img
                                _this.loading=false;
                                _this.url = newsrc[0];

                                _this.imgProp.imgwidth = 500;
                                _this.imgProp.imgheight = (500*newImg.height)/newImg.width;

                                $('#'+_this.imgId).width(_this.imgProp.imgwidth);
                                $('#'+_this.imgId).height(_this.imgProp.imgheight);


                                _this.initWidth(_this.imgProp.imgwidth,_this);
                            }
                        }
                    }else{
                        _this.newurl = _this.src;
                        _this.url = _this.src;
                        newImg.src = _this.src;

                        newImg.onerror = () => {    // 图片加载错误时的替换图片
                            _this.loading = false;
                            _this.newurl = imgerror;
                            _this.url = imgerror;
                            _this.imgProp.imgwidth = 240;
                            _this.imgProp.imgheight = 200;
                            $('#'+_this.imgId).width(_this.imgProp.imgwidth);
                            $('#'+_this.imgId).height(_this.imgProp.imgheight);
                            _this.initWidth(240,_this);
                        };

                        newImg.onload = () => { // 图片加载成功后把地址给原来的img
                            _this.loading=false;
                            _this.url = _this.src;

                            _this.imgProp.imgwidth = 500;
                            _this.imgProp.imgheight = (500*newImg.height)/newImg.width;

                            $('#'+_this.imgId).width(_this.imgProp.imgwidth);
                            $('#'+_this.imgId).height(_this.imgProp.imgheight);


                            _this.initWidth(_this.imgProp.imgwidth,_this);
                        }

                    }
                }else{
                    _this.newurl = imgerror;
                    _this.url = imgerror;
                    newImg.src = imgerror;
                    newImg.onerror = () => {    // 图片加载错误时的替换图片
                        _this.loading = false;
                        _this.imgProp.imgwidth = 240;
                        _this.imgProp.imgheight = 200;
                        $('#'+_this.imgId).width(_this.imgProp.imgwidth);
                        $('#'+_this.imgId).height(_this.imgProp.imgheight);
                        _this.initWidth(240,_this);
                    };
                }
            },
            initWidth(widthN,self){
                if(widthN<=170){
                    self.width = "200px";
                }else{
                    self.width = (widthN+40)+"px";
                }
            },
            showImageFunc(){
                  //点击打开弹窗
//                if(this.url === this.src)
//                {
                    this.showOriginImg = true;
//                }
            },
            rotate(v){
                var deg = this.imgProp.deg =this.imgProp.deg+v;
                $('#'+this.imgId).css({
                    '-webkit-transform': 'rotate(' + deg + 'deg)',
                    '-moz-transform': 'rotate(' + deg + 'deg)',
                    '-o-transform': 'rotate(' + deg + 'deg)',
                    '-ms-transform': 'rotate(' + deg + 'deg)',
                    'transform': 'rotate(' + deg + 'deg)'
                });
//                $('#'+this.imgId).rotate(v);
            },
            //放大缩小
            zoom(v){
                var self = this;
				// 限制最大最小	
				if (self.imgProp.zoom+v > 15 || self.imgProp.zoom+v<0.2){
					return
				}
                self.imgProp.zoom = self.imgProp.zoom+v;
                var width = self.imgProp.imgwidth+self.imgProp.imgwidth*self.imgProp.zoom;
                var height = self.imgProp.imgheight+self.imgProp.imgheight*self.imgProp.zoom;
                self.initWidth(width,self);
                $('#'+this.imgId).width(width);
                $('#'+this.imgId).height(height);
            },
			handleScroll:function(e){
				console.log(e)
				if (e.deltaY > 0){
					this.zoom(-0.2);
				} else {
					this.zoom(0.2);
				}
			}
        },
        watch:{
            src(data){
                this.url = imgerror;
                this.newurl = imgerror;
                this.loadImg();
            }
        },
        mounted() {
            let _this = this;
            _this.url = imgerror;
            _this.newurl = imgerror;
            _this.loadImg();
			_this.$nextTick(() =>{
				window.addEventListener('mousewheel',_this.handleScroll,false)
			})
   
        },
		destroyed() {
            let _this = this;
			window.removeEventListener('mousewheel',_this.handleScroll,false)
		}
    }
</script>