2.1.2 • Published 1 year ago

@howdyjs/img-zoom v2.1.2

Weekly downloads
45
License
ISC
Repository
github
Last release
1 year ago

Img Zoom

Version Size

图片放大插件

特性

  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的srcString--
title显示图片标题String--
group启用图片分组功能,传一个自定义组名String--
zoomCursor是否显示放大镜cursorBoolean-false
showCloseBtn是否显示关闭按钮,开启后只能通过点击关闭按钮关闭模态框Boolean-false
preventDefault是否阻止默认行为,例如父元素的A标签跳转Boolean-false
showLoading加载图片时,是否显示loading动画Boolean-true
customLoading自定义loading动画,函数类型,需要返回HtmlElementFuntion--

以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'}" />
2.1.2

1 year ago

2.1.1

2 years ago

2.1.0

2 years ago

2.0.0

4 years ago

1.6.4

4 years ago

1.6.2

4 years ago

1.6.1

4 years ago

1.6.0

4 years ago

1.4.0

4 years ago

1.3.1

4 years ago

1.1.0

4 years ago

1.0.0

5 years ago