vue放大镜

╰+攻爆jí腚メ 2022-04-14 02:22 324阅读 0赞

最近有一个需求是要像淘宝商品详情页那样，分享一下。小白第一次分享，各位大神莫见笑。

### Build Setup 使用步骤 ###

# 安装 install
    npm install vue-piczoom --save

# 使用 use
    import PicZoom from 'vue-piczoom'
    export default {
      components: {
        PicZoom
      }
    }
    
    --html
    <pic-zoom url="static/imac2.jpg" :scale="3"></pic-zoom>

### Config 配置 ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td><strong>props</strong></td> 
   <td><strong>describe</strong></td> 
   <td><strong>default</strong></td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td>图片地址</td> 
   <td>string required</td> 
  </tr> 
  <tr> 
   <td>big-url</td> 
   <td>大图地址</td> 
   <td>string null</td> 
  </tr> 
  <tr> 
   <td>scale</td> 
   <td>图片放大倍数</td> 
   <td>number 2.5</td> 
  </tr> 
  <tr> 
   <td>scroll</td> 
   <td>放大时页面是否可滚动</td> 
   <td>boolean fasle</td> 
  </tr> 
 </tbody> 
</table>

### Suggest 注意事项 ###

组件默认是100%的高宽，所以建议将组件包含在一个有固定高宽的容器内。如：

<div class="pic-box"> 
         <pic-zoom url="static/imac2.jpg" :scale="3"></pic-zoom>
    </div>

发表评论取消回复

表情：

评论列表（有 0 条评论，324人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS 图片放大镜

需求： 1.小遮罩可以随鼠标在小盒子上移动 2.遮罩层有自己的移动范围 3.鼠标在遮罩层的

小灰灰/ 2023年01月09日 15:56/ 0 赞/ 221 阅读

相关秒懂放大镜

分析 1. 难点列出 1.鼠标在图片区域时，透明小区域出现，放大的区域出现 2.鼠标移出图片时，透明小区域小时，放大区域消失 3.透

蔚落/ 2022年12月09日 05:12/ 0 赞/ 229 阅读

相关放大镜实例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>放大镜

Bertha 。/ 2022年10月27日 05:27/ 0 赞/ 189 阅读

相关实现放大镜效果

1、布局文件 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http:

╰半夏微凉°/ 2022年08月19日 12:16/ 0 赞/ 282 阅读

相关 js_图片放大镜

使用JavaScript语法对鼠标经过的地方进行放大处理，它和上一篇截图一样都用到了clip:rect(top right bottom left);具体代码如下：

深碍√TFBOYSˉ_/ 2022年08月04日 05:25/ 0 赞/ 294 阅读

相关 js简单放大镜

制作类似淘宝上面的放大镜，需要一张小图，一张大图。效果如下 ![Center][] <!DOCTYPE html> <html lang="en">

秒速五厘米/ 2022年06月09日 13:23/ 0 赞/ 239 阅读

相关商品放大镜

<!doctype html> <html> <head> <meta charset="utf-8">

小鱼儿/ 2022年05月18日 02:38/ 0 赞/ 274 阅读

相关放大镜案例：附图

鼠标随着小方框的移动在右边大图显示出来。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aH

﹏ヽ暗。殇╰゛Y/ 2022年04月23日 15:16/ 0 赞/ 269 阅读

相关 vue放大镜

最近有一个需求是要像淘宝商品详情页那样，分享一下。小白第一次分享，各位大神莫见笑。 Build Setup 使用步骤安装 install npm i

╰+攻爆jí腚メ/ 2022年04月14日 02:22/ 0 赞/ 325 阅读

相关 react放大镜组件

放大镜效果图 ![放大镜效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

àì夳堔傛蜴生んèń/ 2021年09月21日 09:38/ 0 赞/ 604 阅读