img-magnifier

基于 vue 的图片放大组件

安装

使用 npm

npm install img-magnifier --save
# 或者 
cnpm install img-magnifier --save
 

使用

在 main.js 文件中引入插件并注册

# main.js 
import imgMagnifier from 'img-magnifier'
import 'img-magnifier/lib/img-magnifier.css'
 
Vue.use(imgMagnifier)

在项目中使用

<img-magnifier
  :smallSrc="smallImgSrc"
  :magnifierSrc="magnifierSrc"
  :maskStyle="maskStyle"
  :maskTransEnter="maskTransEnter"
  :maskTransLeave="maskTransLeave"
  :configs="configs"
></img-magnifier>

启动示例

API

props

参数	描述	类型	必填？
smallSrc	小图片的 src	String	NO
magnifierSrc	放大镜图片的 src	String	NO
maskStyle	遮罩的样式	Object	YES
configs	基本配置项	Object	YES
maskTransEnter	遮罩显示过渡动画样式	Object	NO
maskTransLeave	遮罩隐藏过渡动画样式	Object	NO

例子

<template>
  <div class="container">
    <img-magnifier
      :smallSrc="smallImgSrc"
      :magnifierSrc="magnifierSrc"
      :maskStyle="maskStyle"
      :maskTransEnter="maskTransEnter"
      :maskTransLeave="maskTransLeave"
      :configs="configs"
    ></img-magnifier>
  </div>
</template>
 
<script>
  export default {
    data() {
      return {
        smallImgSrc: '', // 小图片地址
        magnifierSrc: '', // 放大镜图片地址
        // 设置遮罩样式
        maskStyle: {
          width: '200px',
          height: '200px',
          background: '#000',
          opacity: 0.5,
          // 如果有多个过渡效果，可以设置 transition: 'opacity 2s,background 2s' ，请勿设置为：transition: 'all .8s' ，这将会影响组件的实现。
          transition: 'opacity .8s'
        },
        // 设置遮罩进入的过渡效果，选填，要实现动画效果请在 maskStyle 中设置 transition
        // 注意此处是在js中设置样式，如果使用了CSS3的属性，请自行按需添加私有前缀
        maskTransEnter: {
          opacity: 0
          // 这里仅为举例如何添加私有前缀
          // webkitTransform:translate3d(0,0,0)`,
          // transform:translate3d(0,0,0)`
        },
        // 设置遮罩离开的过渡效果，选填，要实现动画效果请在 maskStyle 中设置 transition
        // 同样请自行按需添加私有前缀
        maskTransLeave: {
          opacity: 0
        },
        configs: {
          // 小图片的宽高
          smallImgWidth: 400,
          smallImgHeight: 400,
          // 放大镜图片的宽高，注意是这里是图片的尺寸而不是
          magnifierWidth: 800,
          magnifierHeight: 800,
          magnifierPosWay: 'absolute',
          magnifierPosLeft: '420px',
          magnifierPosTop: 0
        }
      };
    }
  };
</script> 
 
<style scoped></style>