• vue 滚动缩放反转图片功能

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

    1. <style lang="less" scoped>
    2.     .demo-spin-icon-load{
    3.         animation: ani-demo-spin 1s linear infinite;
    4.     }
    5.     .img-max100{
    6.         max-width: 337px;
    7.         max-height: 217px;
    8.         /* height: 160px;
    9.         width: 165px; */
    10.         cursor:pointer;
    11.     }
    12.     .flexcenter{
    13.         display: -webkit-flex!important;
    14.         display: flex!important;
    15.         justify-content:center
    16.     }
    17. </style>
    18. <template>
    19.  
    20. <Modal v-model="showOriginImg" :width="width" :loading="loading">
    21.    <div slot="footer">
    22.       <ButtonGroup class="flexcenter">
    23.          <Button @click="rotate(-90)" type="primary" size="small">
    24.             <Icon :size="14" type="md-return-left"></Icon></Button>
    25.          <Button @click="rotate(90)" type="primary" size="small">
    26.             <Icon :size="14" type="md-return-right"></Icon>
    27.          </Button>
    28.          <Button @click="zoom(0.5)" type="primary" size="small">
    29.             <Icon :size="14" type="md-add"></Icon>
    30.          </Button>
    31.          <Button @click="zoom(-0.5)" type="primary" size="small">
    32.             <Icon :size="14" type="md-remove"></Icon>
    33.          </Button>
    34.        </ButtonGroup>
    35.     </div>
    36.     <!-- <div slot="header"></div> -->
    37.     <div class="flexcenter">
    38.        <img :id="imgId" :src="url">
    39.     </div>
    40. </Modal>
    41. </template>
    42.  
    43. <script>
    44.     import imgerror from "@/images/main/imgerror.png"
    45.     import util from "@/libs/util.js"
    46.     import $ from 'jquery';
    47.     export default {
    48.         props:{
    49.             src:String
    50.         }, // 父组件传过来所需的url
    51.         data() {
    52.             return {
    53.                 newimgerror:imgerror,
    54.                 loading:true,
    55.                 showOriginImg:false,
    56.                 width:'280px',
    57.                 url: imgerror, // 先加载loading.gif
    58.                 imgId: 'image'+Math.ceil(Math.random()*1000000),
    59.                 imgProp:{
    60.                     imgwidth:240,
    61.                     imgheight:200,
    62.                     zoom:0,
    63.                     deg:0,
    64.                 },
    65.                 newurl:imgerror, // 先加载loading.gif,
    66.             }
    67.         },
    68.         methods:{
    69.             loadImg(){
    70.                 var _this = this;
    71.                 var newImg = new Image();
    72.                 if(_this.src){
    73.                     //存在多张图片时,pop显示第一张,点击打开弹窗显示第二张
    74.                     if(_this.src.indexOf(';')>=0){
    75.                         let newsrc = _this.src.split(';')
    76.                         newImg.src = newsrc[1];
    77.                         _this.newurl = newsrc[0];
    78.                         
    79.                         if(newsrc[1] && newsrc[1] != ''){
    80.                             newImg.onload = () => { // 图片加载成功后把地址给原来的img
    81.                                 _this.loading=false;
    82.                                 
    83.                                 _this.url = newsrc[1];
    84.  
    85.                                 _this.imgProp.imgwidth = 500;
    86.                                 _this.imgProp.imgheight = (500*newImg.height)/newImg.width;
    87.  
    88.                                 $('#'+_this.imgId).width(_this.imgProp.imgwidth);
    89.                                 $('#'+_this.imgId).height(_this.imgProp.imgheight);
    90.  
    91.  
    92.                                 _this.initWidth(_this.imgProp.imgwidth,_this);
    93.                             }
    94.                             newImg.onerror = () => {    // 图片加载错误时的替换图片
    95.                                 _this.loading = false;
    96.                                 _this.newurl = imgerror;
    97.                                 _this.url = imgerror;
    98.  
    99.                                 _this.imgProp.imgwidth = 240;
    100.                                 _this.imgProp.imgheight = 200;
    101.                                 _this.initWidth(240,_this);
    102.                             };
    103.                         }else{
    104.                             newImg.onload = () => { // 图片加载成功后把地址给原来的img
    105.                                 _this.loading=false;
    106.                                 _this.url = newsrc[0];
    107.  
    108.                                 _this.imgProp.imgwidth = 500;
    109.                                 _this.imgProp.imgheight = (500*newImg.height)/newImg.width;
    110.  
    111.                                 $('#'+_this.imgId).width(_this.imgProp.imgwidth);
    112.                                 $('#'+_this.imgId).height(_this.imgProp.imgheight);
    113.  
    114.  
    115.                                 _this.initWidth(_this.imgProp.imgwidth,_this);
    116.                             }
    117.                         }
    118.                     }else{
    119.                         _this.newurl = _this.src;
    120.                         _this.url = _this.src;
    121.                         newImg.src = _this.src;
    122.  
    123.                         newImg.onerror = () => {    // 图片加载错误时的替换图片
    124.                             _this.loading = false;
    125.                             _this.newurl = imgerror;
    126.                             _this.url = imgerror;
    127.                             _this.imgProp.imgwidth = 240;
    128.                             _this.imgProp.imgheight = 200;
    129.                             $('#'+_this.imgId).width(_this.imgProp.imgwidth);
    130.                             $('#'+_this.imgId).height(_this.imgProp.imgheight);
    131.                             _this.initWidth(240,_this);
    132.                         };
    133.  
    134.                         newImg.onload = () => { // 图片加载成功后把地址给原来的img
    135.                             _this.loading=false;
    136.                             _this.url = _this.src;
    137.  
    138.                             _this.imgProp.imgwidth = 500;
    139.                             _this.imgProp.imgheight = (500*newImg.height)/newImg.width;
    140.  
    141.                             $('#'+_this.imgId).width(_this.imgProp.imgwidth);
    142.                             $('#'+_this.imgId).height(_this.imgProp.imgheight);
    143.  
    144.  
    145.                             _this.initWidth(_this.imgProp.imgwidth,_this);
    146.                         }
    147.  
    148.                     }
    149.                 }else{
    150.                     _this.newurl = imgerror;
    151.                     _this.url = imgerror;
    152.                     newImg.src = imgerror;
    153.                     newImg.onerror = () => {    // 图片加载错误时的替换图片
    154.                         _this.loading = false;
    155.                         _this.imgProp.imgwidth = 240;
    156.                         _this.imgProp.imgheight = 200;
    157.                         $('#'+_this.imgId).width(_this.imgProp.imgwidth);
    158.                         $('#'+_this.imgId).height(_this.imgProp.imgheight);
    159.                         _this.initWidth(240,_this);
    160.                     };
    161.                 }
    162.             },
    163.             initWidth(widthN,self){
    164.                 if(widthN<=170){
    165.                     self.width = "200px";
    166.                 }else{
    167.                     self.width = (widthN+40)+"px";
    168.                 }
    169.             },
    170.             showImageFunc(){
    171.                   //点击打开弹窗
    172. //                if(this.url === this.src)
    173. //                {
    174.                     this.showOriginImg = true;
    175. //                }
    176.             },
    177.             rotate(v){
    178.                 var deg = this.imgProp.deg =this.imgProp.deg+v;
    179.                 $('#'+this.imgId).css({
    180.                     '-webkit-transform': 'rotate(' + deg + 'deg)',
    181.                     '-moz-transform': 'rotate(' + deg + 'deg)',
    182.                     '-o-transform': 'rotate(' + deg + 'deg)',
    183.                     '-ms-transform': 'rotate(' + deg + 'deg)',
    184.                     'transform': 'rotate(' + deg + 'deg)'
    185.                 });
    186. //                $('#'+this.imgId).rotate(v);
    187.             },
    188.             //放大缩小
    189.             zoom(v){
    190.                 var self = this;
    191. 				// 限制最大最小	
    192. 				if (self.imgProp.zoom+v > 15 || self.imgProp.zoom+v<0.2){
    193. 					return
    194. 				}
    195.                 self.imgProp.zoom = self.imgProp.zoom+v;
    196.                 var width = self.imgProp.imgwidth+self.imgProp.imgwidth*self.imgProp.zoom;
    197.                 var height = self.imgProp.imgheight+self.imgProp.imgheight*self.imgProp.zoom;
    198.                 self.initWidth(width,self);
    199.                 $('#'+this.imgId).width(width);
    200.                 $('#'+this.imgId).height(height);
    201.             },
    202. 			handleScroll:function(e){
    203. 				console.log(e)
    204. 				if (e.deltaY > 0){
    205. 					this.zoom(-0.2);
    206. 				} else {
    207. 					this.zoom(0.2);
    208. 				}
    209. 			}
    210.         },
    211.         watch:{
    212.             src(data){
    213.                 this.url = imgerror;
    214.                 this.newurl = imgerror;
    215.                 this.loadImg();
    216.             }
    217.         },
    218.         mounted() {
    219.             let _this = this;
    220.             _this.url = imgerror;
    221.             _this.newurl = imgerror;
    222.             _this.loadImg();
    223. 			_this.$nextTick(() =>{
    224. 				window.addEventListener('mousewheel',_this.handleScroll,false)
    225. 			})
    226.    
    227.         },
    228. 		destroyed() {
    229.             let _this = this;
    230. 			window.removeEventListener('mousewheel',_this.handleScroll,false)
    231. 		}
    232.     }
    233. </script>
    234.

  • 相关阅读:
    webpack 解决：Cannot use import statement outside a module 的问题
    要使用API接口获取淘宝电商平台的数据，您需要遵循以下步骤：
    Python自动操作 GUI 神器：PyAutoGUI
    sys文件系统
    云存储空间的动态分配技术
    基于Java的微小企业人事管理系统的设计与实现 毕业设计-附源码231012
    操作系统备考学习 day9 (3.1.1 ~ 3.1.11)
    抓包工具charles修改请求和返回数据
    Nginx(七) root和alias的区别及详细测试
    制作本地SCLo-scl镜像仓库(reposync下载rpm包、createrepo制作镜像仓库、httpd发布服务)
  • 原文地址：https://blog.csdn.net/sinat_24713805/article/details/128180687