https://github.com/ssshooter/img-vuer

An Mobile-First image viewer for Vue3 / 一个移动端优先的 Vue3 图片预览插件
https://github.com/ssshooter/img-vuer

image image-gallery vue vue-image-viewer vuejs

Last synced: 6 days ago
JSON representation

An Mobile-First image viewer for Vue3 / 一个移动端优先的 Vue3 图片预览插件

• Host: GitHub
• URL: https://github.com/ssshooter/img-vuer
• Owner: SSShooter
• License: mit
• Created: 2018-03-06T14:25:55.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2024-03-04T13:44:18.000Z (11 months ago)
• Last Synced: 2024-10-30T05:57:23.368Z (3 months ago)
• Topics: image, image-gallery, vue, vue-image-viewer, vuejs
• Language: Vue
• Homepage: https://img-vuer.vercel.app/
• Size: 4.88 MB
• Stars: 262
• Watchers: 6
• Forks: 43
• Open Issues: 11
• Metadata Files:
  • Readme: README.cn.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# img-vuer

Vue2 可用版本：https://github.com/ssshooter/img-vuer/tree/legacy

> 一个移动端优先的 Vue3 图片预览插件

- :ok_woman: 极速使用

- :point_right: 滑动手势

- :mag: 缩放手势

- 支持缩略图

- 使用 `scale()` 修复放大模糊问题

- 移动优先，但支持桌面浏览器

- 返回键退出浏览（安卓手机）

**[点击查看使用实例](https://img-vuer.vercel.app/)**或扫描二维码



## 安装

```bash

npm i img-vuer3 --save

```

## 使用

```javascript

// 引入 img-vuer，安装插件

import gallery from 'img-vuer3'

import 'img-vuer3/dist/style.css'

app.use(gallery, {

  swipeThreshold: 150, // 滑动阈值，默认值 100

  isIndexShow: true, // 是否显示图片序号

  useCloseButton: true, // 只通过右上角关闭键退出浏览

  preload: true, // 预加载同组图片

  sliderBackgroundColor: 'rgba(0,0,0,0.6)',

  sliderZIndex: 1001,

})

```

```html













close

```

## API

| api               | arg   | description                                                       |

| ----------------- | ----- | ----------------------------------------------------------------- |

| close()           | /     | 退出浏览                                                          |

| onIndexChange()   | cb    | `$imgVuer.onIndexChange((newVal, oldVal)=>{...})`                 |

| onToggle()        | cb    | 退出或进入浏览时触发 `$imgVuer.onToggle((newVal, oldVal)=>{...})` |

| changeBGColor()   | color | 修改浏览器背景 `$imgVuer.changeBGColor('#fff')`                   |

| next()            | /     | 下一幅图 `$imgVuer.next()`                                        |

| prev()            | /     | 上一幅图 `$imgVuer.prev()`                                        |

| getCurrentIndex() | /     | /                                                                 |

## 开发

```bash

# 依赖安装

npm i

# 运行开发环境

npm run dev

# 打包插件

npm run build-lib

```

## 问题处理

### 页面大小不对

添加 meta

```html

```

### 大量大图

如果你把大量大图分到一组，img-vuer 会在你预览这组的任意图片时加载该组所有图片。这会耗费用户大量流量和拖慢页面。

你可以使用 preload 选项解决这个问题，这个版本只会加载你浏览过的图片。

### key

不能使用 index 作 `v-gallery` 图片的循环 key.

## License

MIT