一个手写的vue放大镜效果


Posted in Javascript onAugust 09, 2019

组件使用less,请确保已安装loader

本组件为放大镜组件,传参列表为:

•width: 必传,设置放大镜的宽高(正方形),放大区域等同,放大倍数为2倍

•picList:必传,传入图片列表

使用示例:

script:

import mirror from 'xx/mirror'
 export default {
  components:{
   mirror
  },
  data(){
   return {
    width:300,
    picList:[
      xxxxxx,
      xxxxxx
    ],
   }
  }
 }

html:

<mirror :width="width" :picList="picList" />

详细代码:

HTML:

<template>
 <div class="mirror">
   <div class="wrap" :style="{width:width+'px',height:width+'px'}" >
    <div ref="truth" :style="{width:'100%',height:'100%'}" @mousemove="move" @mouseenter="showMagnify" @mouseleave="hideMagnify">
    <div class="mask" ref="mask" v-show = "showMask" :style="{width:width/2+'px',height:width/2+'px',left:maskPosition.x+'px',top:maskPosition.y+'px'}"></div>
    <img :src="picList[picIndex]" draggable="false"/>
    </div>
    <div class="virtual" ref="virtual" v-if = "isShowVirtual" :style="{width:width+'px',height:width+'px'}" >
      <div class="big" ref = "bigPic" :style="{position:'absolute',width:2*width+'px',height:2*width+'px',backgroundSize:'100% 100%',backgroundImage:`url(${picList[picIndex]})`,left:percent.x, top:percent.y}" >
      </div>
    </div>
   </div>
   <ul class="picList" :style="{width:width+'px'}">
     <li v-for = "(item,index) in picList" :class="{now:index==picIndex}" :data-index="index" :key ="item" @mouseenter="changeIndex">
      <img :src ="item" />
     </li>
   </ul>
 </div>
</template>

JS:

export default {
   props:['width','picList'],//宽度是用来给放大镜的
   data(){
    return {
     picIndex:0,
     isShowVirtual:false,
     showMask:false,
     maskPosition:{},
     percent:{},
    }
   },
   methods:{
    computedOffset(obj,prop){ //计算元素到body的绝对位置
    if(obj==document.body || obj.offsetParent == document.body){
     return parseInt(obj[prop])
    }
    return parseInt(obj[prop])+this.computedOffset(obj.offsetParent,prop)
  },
    changeIndex(e){
     this.picIndex = e.target.dataset.index
    },
    showMagnify(e){
     this.showMask=true;
     this.isShowVirtual = true;
    },
    hideMagnify(){
     this.isShowVirtual=false;
     this.showMask=false
    },
    computePosition(e){
      let x = e.pageX,y = e.pageY;
      let mask = this.$refs.mask;
      let truth = this.$refs.truth;
      let virtual = this.$refs.virtual;
      let bigPic = this.$refs.bigPic;
      x = x-this.computedOffset(truth,'offsetLeft') -mask.offsetWidth/2;
      y = y-this.computedOffset(truth,'offsetTop')- mask.offsetHeight/2;
     if(x<=0) {
       x=0
      }else if(x>truth.offsetWidth - mask.offsetWidth){
       x = truth.offsetWidth/2
      }
      if(y<=0){
       y=0;
      }
      else if(y>truth.offsetHeight - mask.offsetHeight){
       y = truth.offsetHeight/2
      }

      this.maskPosition = {
       x,y
      }
      //计算比例
      this.percent={
       x:-x/(truth.offsetWidth-mask.offsetWidth)*(bigPic.offsetWidth - virtual.offsetWidth)+'px',
       y:-y/(truth.offsetHeight-mask.offsetHeight)*(bigPic.offsetHeight - virtual.offsetHeight)+'px'
      }
    },
    move(e){
     this.computePosition(e)
    }
  }
  }

CSS:

<style lang="less" scoped>
.now{
 border-color: cyan !important;
}
 .mirror{
  width:100%;
  .wrap{
   user-select: none;
   margin-bottom: 20px;
   position: relative;
   background-color: #fff;
   border:1px solid gray;
   box-sizing:border-box;
     cursor: pointer;
    img{
     width:100%;
     height:100%;
    }
    .virtual{
     overflow:hidden;
     width:100%;
     height:100%;
     position:absolute;
     left:calc(100% + 10px);
     top:0;
     background-repeat:no-repeat
    }
    .mask{
     position: absolute;
     background-image: url('https://img-tmdetail.alicdn.com/tps/i4/T12pdtXaldXXXXXXXX-2-2.png');
     background-repeat:repeat;
     cursor: move;
    }
  }
  .picList{
   width:100%;
   display: flex;
   justify-content: space-between;
   flex-wrap:wrap;
   li{
    width:50px;
    height:50px;
    margin:5px;
    border:1px solid transparent;
    box-sizing: border-box;
    img{
     width:100%;
     height:100%
    }
   }
  }
  .picList:after{
   content:"";
   flex:auto;
  }
 }
</style>

可直接复制文件内容至项目使用,文件地址:https://blog-static.cnblogs.com/files/hhyf/mirror.vue.js

效果

一个手写的vue放大镜效果

总结

以上所述是小编给大家介绍的一个手写的vue放大镜效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery 多级下拉菜单核心代码
May 21 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
javascript实现设置、获取和删除Cookie的方法
Jun 01 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
Bootstrap布局方式详解
May 27 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 Javascript
uni app仿微信顶部导航条功能
Sep 17 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
Aug 09 #Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 #Javascript
小程序Request的另类用法详解
Aug 09 #Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 #Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 #Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 #Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 #Javascript
You might like
php根据分类合并数组的方法实例详解
2013/11/06 PHP
php使用文本统计访问量的方法
2016/05/12 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
利用Jquery实现可多选的下拉框
2014/02/21 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
javascript实现uploadify上传格式以及个数限制
2015/11/23 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
原生js实现简单的模态框示例
2017/09/08 Javascript
vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
2018/03/09 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
浅谈django model postgres的json字段编码问题
2018/01/05 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
python实现ip地址的包含关系判断
2020/02/07 Python
区分python中的进程与线程
2020/08/13 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
new修饰符是起什么作用
2015/06/28 面试题
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
2014年生产部工作总结
2014/12/17 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
2015年资料员工作总结
2015/04/25 职场文书
员工手册编写范本
2015/05/14 职场文书
庆祝教师节主持词
2015/07/06 职场文书
《穷人》教学反思
2016/02/19 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
pytorch中F.avg_pool1d()和F.avg_pool2d()的使用操作
2021/05/22 Python
Win11 21h2可以升级22h2吗?看看你的电脑符不符合要求
2022/07/07 数码科技