Node's Pocket Monsters

    img-magnifier

    0.1.2 • Public • Published

    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>

    Install

    npm i img-magnifier

    DownloadsWeekly Downloads

    7

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    60.2 kB

    Total Files

    12

    Last publish

    Collaborators

    • haishangfeie