vue怎么实现图片缩放

这篇“vue怎么实现图片缩放”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue怎么实现图片缩放”文章吧。

实现效果如下

这几天做了个没做过的组件，以此记录下，需要的效果是在一个dom内，缩放拖拽图片。

封装的子组件imgbox.Vue。父组件中使用，需要在父组件中准备一个盒子用来装图片，在这个盒子中可以缩放拽拽图片。

父组件如下

父组件html部分

<!-- 普通方形盒子 --> <div class="box1">       <imgbox :config="data1" @enlarge="enlargeImg" @narrow="narrowImg" @changeImg="change"></imgbox> </div>

父组件的css部分

.box1{     width: 300px;     height: 300px;     border: 1px solid #000;     /deep/ .dragImg{//深度css，由于vue中的style标签的scoped属性不能直接给子组件样式，需要使用deep在父组件中给子组件中的dom给样式       width: 420px;//子组件中的图片大小       height: 280px;     }     /deep/ .btnbox{//深度css，由于vue中的style标签的scoped属性不能直接给子组件样式，需要使用deep在父组件中给子组件中的dom给样式       width: 70px;//子组件中按钮盒子的大小       height: 20px;       top: 20px;//子组件盒子的位置       left: 20px;       .operChange{//按钮的大小         width: 20px;         height: 20px;       }     }   }

父组件应用子组件

import imgbox from './imgbox' //拖拽，放大缩小图片  子组件 components:{ imgbox },

配置数据

data1:{         name:"data1",//标识数据         imgsrc:require('@/assets/timg.jpg'),//图片路径         imgname:"img01",//图片对应的名字   用该属性和下面的图片数组属性对照，用于子组件获取索引，给默认高亮         scale:1,//默认缩放1       }

方法

enlargeImg:function(val){//放大图片       this[val.name].scale = this[val.name].scale + 0.1     } ,narrowImg:function(val){//缩小图片       if(this[val.name].scale >= 0.1){         this[val.name].scale = this[val.name].scale - 0.1       }     }

子组件imgbox.vue如下

子组件html部分

<template>   <div class="myDiv">     <img class="dragImg" ref="img" name="removeImg" :src="imgsrc" v-drag :>     <div class="btnbox" :ref="config.ref">       <img src="../assets/operaImg2.png" title="放大" @click="clickEnlarge" class="operChange">       <img src="../assets/operaImg3.png" title="缩小" @click="clickNarrow" class="operChange">     </div>   </div> </template>

子组件接受父组件传递参数，自定义指令

export default {   components:{},   props:['config'],   data(){     return {       imgsrc:"",//图片的路径     }   },   directives:{//注册指令     drag:function(el){       let dragBox = el; //获取当前元素       dragBox.onmousedown = e => {         e.preventDefault();         //算出鼠标相对元素的位置         let disX = e.clientX - dragBox.offsetLeft;         let disY = e.clientY - dragBox.offsetTop;         document.onmousemove = e => {           //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置           e.preventDefault();           let left = e.clientX - disX;           let top = e.clientY - disY;           //移动当前元素           dragBox.style.left = left + "px";           dragBox.style.top = top + "px";         };         document.onmouseup = e => {           e.preventDefault();           //鼠标弹起来的时候不再移动           document.onmousemove = null;           //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）             document.onmouseup = null;         };       }     }   },   watch:{     config:function(val){       this.imgsrc = val.imgsrc     }   },   computed:{     scaleFun:function(){       return `transform:scale(${this.config.scale})`     }   },   created(){},   methods:{     clickEnlarge(){//点击放大       let data = this.config       this.$emit('enlarge',data)     }     ,clickNarrow(){//点击缩小       let data = this.config       this.$emit('narrow',data)     }   }, }

子组件css

.myDiv{   width: 100%;   height: 100%;   position: relative;   overflow: hidden;   img{     width: 100%;     height: 100%;     position: relative;   }   .btnbox{     display: flex;     position: absolute;     top: 20px;     left: 20px;     width: 70px;     height: 20px;     justify-content: space-around;     z-index: 99;     img{       width: 20px;       height: 20px;       opacity: 0.7;       cursor: pointer;       display: inline-block;     }   } }

以上就是关于“vue怎么实现图片缩放”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。