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怎么實現圖片縮放”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。