精华内容
下载资源
问答
  • 基于vue的图片放大镜效果插件 演示地址 安装 npm install vue2.0-zoom 引入 import imgZoom from 'vue2.0-zoom' 组件 components: { imgZoom } 标签 <img-zoom src="img-samll.jpg" wi...

    vue2.0-zoom

    基于vue的图片放大镜效果插件

    演示地址

    安装

    npm install vue2.0-zoom

    引入

    import imgZoom from 'vue2.0-zoom'

    组件

    components: { imgZoom }

    标签

    <img-zoom src="img-samll.jpg" width="450" height="250" bigsrc="img-big.jpg" :configs="configs"></img-zoom>

    配置参数

        configs: {
                 width:650,
                 height:350,
                 maskWidth:100,
                 maskHeight:100,
                 maskColor:'red',
                 maskOpacity:0.2
               }

    有问题欢迎留言、star,详细参数说明

    Github地址

    展开全文
  • Vue图片放大镜插件

    千次阅读 2020-07-10 23:37:27
    Vue(2.x) 图片放大器(Photoloupe) [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wdg2GA8A-1594395415139)...

    vue-photo-zoom-pro

    Vue(2.x) 图片放大器(Photoloupe)

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wdg2GA8A-1594395415139)(https://raw.githubusercontent.com/Mater1996/vue-photo-zoom-pro/master/example.png)]

    DEMO

    demo

    使用方法

    
    npm install vue-photo-zoom-pro
    
    

    main.js引入

    import VuePhotoZoomPro from "vue-photo-zoom-pro";
    
    Vue.use(VuePhotoZoomPro);
    

    *.vue文件

    <vue-photo-zoom-pro
      url="https://bpic.588ku.com/illus_water_img/18/07/30/f3c7060bc28216271dc8c4630b288331.jpg!/watermark/url/L3dhdGVyL3dhdGVyX2JhY2tfNDAwXzIwMC5wbmc=/repeat/true"
    ></vue-photo-zoom-pro>
    

    配置项

    props

    Prop NameTypeDefaultNote
    urlString图片地址(photo url)
    high-urlString更清晰的图片,若不提供会采用 url(more detailed photo url)
    scaleNumber2放大倍数(scale number)
    disabledBooleanfalse禁用
    widthNumber166内部放大区域宽度(width of internal amplification region)
    heightNumber-1内部放大区域高度,如果不设置或者小于0会和宽度保持同步(height of internal amplification region)
    typeStringsquare放大镜类型(circle,square)(magnifying glass type (circle,square))
    zoomer-styleObject{}内部放大区域样式(style of internal amplification region)
    out-zoomer-styleObject{}外部放大区域样式(style of external amplification region)
    selectorBooleantrue是否显示选择器(show or remove selector)
    out-zoomerBooleanfalse切换内外部放大镜(amplification region will be displayed on the outside)
    pointerBooleanfalse外部区域的中心点 (the center of an external area)
    baselineBooleanfalse外部区域的基线 (the baseline of the external area)
    enter-eventObject/UIEventnull当需要在外部监听鼠标移入事件时,请通过该字段传入事件(When you need to listen for enter events outside the component)
    move-eventObject/UIEventnull当需要在外部监听移动事件时,请通过该字段传入事件(必须包含 pageX,pageY,clientY),这将禁用内部移动监听(when you need to listen for moving events outside the component)
    leave-eventObject/UIEventnull当需要在外部监听离开事件时,请通过该字段传入事件(When you need to listen for leaving events outside the component)
    disabled-reactiveBooleanfalse禁用响应式,不会轮询图像的位置,在确定不改变布局的情况下使用可以提升性能

    Slot

    Slot NameNote
    default默认区域(default)
    zoomer内部放大区域
    outzoomer外部放大区域

    方法

    Method NameNote
    reset重置放大镜位置(reset zoom position)

    事件

    Event NameNoteevent
    created图片放大镜创建(photo-zoom created)图像属性(img rect{top,left,width,height}),图像元素(img element)
    mouseenter鼠标移入事件
    mousemove鼠标移动事件
    mouseleave鼠标移出事件
    展开全文
  • vue实现放大镜效果

    2021-01-18 17:02:15
    本文实例为大家分享了vue实现放大镜效果的具体代码,供大家参考,具体内容如下 实现类淘宝放大镜效果 前端小白一枚,最近在进行 vue 方面的学习,逛淘宝闲来无事想试试做个放大镜,结果虽然做出来了,但其中有一些...
  • Vue3.0手写放大镜插件

    2021-09-23 15:33:09
    需要准备vueuse插件 npm i @vueuse/core # yarn add @vueuse/core 我们开始上代码吧 <template> <div class="goods-image"> <div class="large" :style="[ { backgroundImage: `url(${images...

    需要准备vueuse插件

    npm i @vueuse/core # yarn add @vueuse/core
    

    我们开始上代码吧

    <template>
      <div class="goods-image">
        <div
          class="large"
          :style="[
            { backgroundImage: `url(${images[currIndex]})` },
            { backgroundPosition: `${backgroundposition.left} ${backgroundposition.top}` }
          ]"
          v-if="!hide"
        ></div>
        <div class="middle" ref="target" @mouseenter="hide = false" @mouseleave="hide = true">
          <img :src="images[currIndex]" alt="" />
          <div class="layer" :style="position"></div>
        </div>
        <ul class="small">
          <li v-for="(img, i) in images" :key="img" :class="{ active: i === currIndex }">
            <img @mouseenter="currIndex = i" :src="img" alt="" />
          </li>
        </ul>
      </div>
    </template>
    <script>
    import { ref, reactive, watch } from 'vue'
    import { useMouseInElement } from '@vueuse/core'
    export default {
      name: 'GoodsImage',
      props: {
        images: {
          type: Array,
          default: () => []
        }
      },
      setup(props) {
        const currIndex = ref(0)
        const hide = ref(true)
        const target = ref(null)
        // 遮罩层位置坐标
        const position = reactive({
          left: 0,
          top: 0
        })
        const backgroundposition = reactive({
          left: 0,
          top: 0
        })
        const { elementX, elementY, isOutside } = useMouseInElement(target)
        watch([elementX, elementY, isOutside], v1 => {
          if (isOutside.value) return
          // X方向坐标范围控制
          if (elementX.value < 100) {
            // 左侧
            position.left = 0
          } else if (elementX.value > 300) {
            // 右侧
            position.left = 200
          } else {
            // 中间
            position.left = elementX.value - 100
          }
          // Y方向坐标范围控制
          if (elementY.value < 100) {
            // 左侧
            position.top = 0
          } else if (elementY.value > 300) {
            // 右侧
            position.top = 200
          } else {
            // 中间
            position.top = elementY.value - 100
          }
          // 计算预览大图的移动的距离
          backgroundposition.left = -position.left * 2 + 'px'
          backgroundposition.top = -position.top * 2 + 'px'
          // 计算遮罩层的位置
          position.left = position.left + 'px'
          position.top = position.top + 'px'
          // 方法2
          // if (!v1[2]) {
          //   console.log(v1)
          //   if (v1[0] <= 300) {
          //     position.left = v1[0] - 100 + 'px'
          //     backgroundposition.left = -(v1[0] - 100) * 2 + 'px'
          //     if (v1[0] <= 100) {
          //       position.left = 0 + 'px'
          //       backgroundposition.left = 0 + 'px'
          //     }
          //   } else if (v1[0] > 300) {
          //     position.left = 200 + 'px'
          //   }
          //   if (v1[1] <= 300) {
          //     position.top = v1[1] - 100 + 'px'
          //     backgroundposition.top = -(v1[1] - 100) * 2 + 'px'
          //     if (v1[1] <= 100) {
          //       position.top = 0 + 'px'
          //       backgroundposition.top = 0 + 'px'
          //     }
          //   } else if (v1[1] > 300) {
          //     position.top = 200 + 'px'
          //   }
          // }
        })
        return { currIndex, target, position, backgroundposition, hide }
      }
    }
    </script>
    <style scoped lang="less">
    .goods-image {
      width: 480px;
      height: 400px;
      position: relative;
      display: flex;
      z-index: 500;
      .large {
        position: absolute;
        top: 0;
        left: 412px;
        width: 400px;
        height: 400px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        background-repeat: no-repeat;
        background-size: 800px 800px;
        background-color: #f8f8f8;
      }
      .middle {
        width: 400px;
        height: 400px;
        background: #f5f5f5;
      }
      .small {
        width: 80px;
        li {
          width: 68px;
          height: 68px;
          margin-left: 12px;
          margin-bottom: 15px;
          cursor: pointer;
          &:hover,
          &.active {
            border: 2px solid @xtxColor;
          }
        }
      }
    }
    .middle:hover {
      position: relative;
      cursor: move;
      .layer {
        width: 200px;
        height: 200px;
        background: rgba(0, 0, 0, 0.2);
        left: 0;
        top: 0;
        position: absolute;
      }
    }
    </style>
    
    

    如何使用?需要传入的数据类型?

    // 1.导入文件的地址
    import GoodsImage from './goods-image.vue'
    // 2.注册到components中
    components:{ GoodsImage }
    // 3. 使用
    <GoodsImage :images="detail.mainPictures" />
    

    需要传入的数据类型(数组即可)
    在这里插入图片描述


    达成的效果(`鼠标悬浮前`)

    在这里插入图片描述

    达成的效果(鼠标悬浮后)

    在这里插入图片描述

    展开全文
  • 使用图片放大镜插件 vue-piczoom 1. 安装 npm install vue-piczoom --save 2. 使用 <template> <div class="wrap"> <!-- 组件默认是100%的高宽,所以建议将组件包含在一个有固定高宽的容器内 -->...

    vue-piczoom:https://www.npmjs.com/package/vue-piczoom/v/1.0.6

    使用图片放大镜插件 vue-piczoom

    1. 安装

    npm install vue-piczoom --save

    2. 使用

    <template>
      <div class="wrap">
        <!-- 组件默认是100%的高宽,所以建议将组件包含在一个有固定高宽的容器内 -->
        <div style="width: 500px; height: 500px">
          <!-- 第三步:标签使用 -->
          <pic-zoom url="/static/img/1.jpg" :scale="3"></pic-zoom>
        </div>
      </div>
    </template>
    <script>
    // 第一步:引入vue-piczoom
    import PicZoom from "vue-piczoom";
    export default {
      // 第二部:注册组件
      components: {
        PicZoom,
      },
      data() {
        return {};
      },
    };
    </script>
    <style scoped>
    </style>
    

    3. Config 配置

    参数说明默认值
    url图片地址string required
    big-url大图地址string null
    scale图片放大倍数number 2.5
    scroll放大时页面是否可滚动boolean fasle
    show-edit是否显示旋转图片按钮boolean fasle
    展开全文
  • 本篇文章主要介绍了基于vue2.x的电商图片放大镜插件的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 图片放大镜插件 vue-piczoom 1.安装 npm install vue-piczoom -S 2.在组件内使用 <template> <div style="width: 400px;height: 400px"> <pic-zoom url="../../static/img/photo-da/photo_rule....
  • vue爬坑之PicZoom插件,实现商品放大镜

    千次阅读 热门讨论 2019-05-06 20:23:17
    vue爬坑之PicZoom插件,实现商品放大镜 ** 我自己用vue做的一个前后端分离的商城项目,最近刚好需要实现商品放大镜,所以就用了这个vue的PicZoom插件。以下是实现效果: 以下是代码: 首先第一步要下载该插件:npm ...
  • 基于vue2.x的电商图片放大镜插件
  • vue仿淘宝放大镜插件的使用

    千次阅读 2019-07-04 10:44:26
    1.首先下载PicZoom插件 npm install vue-piczoom --save 2.使用时注意:原来img标签要改为pic-zoom,并且属性src要改为url html部分代码: <template> <div> <div class="box"> <pic-...
  • 最近在撸一个电商网站,有一个需求是要像淘宝商品详情页那样,鼠标放在主图上,显示图片...picture magnifier component for Vue.js 2.x基于vue2.x的电商图片放大镜插件 GIF 动画截图 Build Setup 使用步骤 # 安...
  • vue图片放大镜效果

    2017-11-28 19:00:00
    经测试,原插件在使用时有bug,即在预览时进行鼠标滚动,导致遮罩层计算错误。我已修复该bug,特分享出来。 组件核心代码: <template> <div class="magnify"> <div class="preview-box" @mousemo...
  • vue-piczoom 基于vue2.x的电商图片放大镜插件 使用步骤 #安装 install npm install vue-piczoom --save // 使用 import PicZoom from 'vue-piczoom' export default { name: 'App', components: { PicZoom } ...
  • vue插件vue-piczoom 图片放大镜介绍

    千次阅读 2020-04-14 15:21:30
    今天分享的主角是vue-piczoom,它是基于vue2.x的电商图片放大镜插件。 二、vue-piczoom介绍 使用介绍(注:安装需要npm,不了解的小伙伴可以点这里) # 安装 install npm install vue-piczoom --save ...
  • 1.插件名称 vue-photo-zoom-pro(点击查看具体参数) 查看------------------->demo 2.使用方法 npm install vue-photo-zoom-pro 3.在main.js中使用 import VuePhotoZoomPro from "vue-photo-zoom-pro"; Vue.use...
  • 我的项目是由vue+element搭建的,有要做放大镜的需求,这是一款很好的插件,从引入到使用小白也可以使用的很熟练,话不多说,放下链接大家可以自己尝试尝试 github.com/Mater1996/v… 转载于:...
  • 淘宝放大镜插件vue-piczoom)

    千次阅读 2019-09-19 11:18:07
    Build Setup 使用步骤 ...npm install vue-piczoom --save # 使用 use --script import PicZoom from 'vue-piczoom' export default { name: 'App', components: { PicZoom } } --html <pic-z...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 310
精华内容 124
关键字:

vue放大镜效果插件

vue 订阅