文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue怎么实现图片缩放

2023-06-30 04:29

关注

这篇“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怎么实现图片缩放”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯