@howdyjs/img-zoom

Img Zoom

图片放大插件

特性

1. 实现点击图片放大显示
2. 支持设置同组图片，可在放大的模态框进行切换上一张下一张
3. 图片Loading加载效果
4. 可设置点击后加载显示的是另外一张大图
5. 封装了vue指令的形式

原生使用

import ImgZoom from '@howdyjs/img-zoom'
new ImgZoom({
  el: '#el', // Selector or Dom
  options: {
    // Your Options
    // 参考下方说明
  }
})

• UMD CDN: https://unpkg.com/@howdyjs/img-zoom/dist/index.umd.js
• UMD Name: HowdyImgZoom
• UMD Example: Click here

Options (Objcet)

参数	说明	类型	可选值	默认值
imgSrc	放大后的图片地址, 默认不传会使用原img的src	String	-	-
title	显示图片标题	String	-	-
group	启用图片分组功能，传一个自定义组名	String	-	-
zoomCursor	是否显示放大镜cursor	Boolean	-	false
showCloseBtn	是否显示关闭按钮，开启后只能通过点击关闭按钮关闭模态框	Boolean	-	false
preventDefault	是否阻止默认行为，例如父元素的A标签跳转	Boolean	-	false
showLoading	加载图片时，是否显示loading动画	Boolean	-	true
customLoading	自定义loading动画，函数类型，需要返回HtmlElement	Funtion	-	-

以Vue指令方式使用

import { ImgZoomDirective } from '@howdyjs/resize'
// Vue3全局引入
app.use(ImgZoomDirective)

// Vue2全局引入(对vue2做了兼容)
Vue.use(ImgZoomDirective)

// 组件内引入
export default {
  directive: {
    ImgZoom: ImgZoomDirective
  }
}

指令支持简写

<img v-img-zoom:example="http://a.com/b.png" />
// 等价于
<img v-img-zoom="{group: 'example', imgSrc: 'http://a.com/b.png'}" />