# hevue-img-preview
**Repository Path**: ihope_top/hevue-img-preview
## Basic Information
- **Project Name**: hevue-img-preview
- **Description**: 本组件是一个基于 vue 编写的vue图片预览组件，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果，比较适合给文章及页面的所有图片添加预览效果，预览背景色，关闭按钮颜色，控制条的背景也和字体颜色都可自定义，兼容 ie9+，火狐，Safari，谷歌浏览器，支持多图预览。如果能帮上你，希望可以给个小星星，如果有任何使用意见或建议，也欢迎回复或者提交issure
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 79
- **Forks**: 8
- **Created**: 2020-06-14
- **Last Updated**: 2025-09-15
## Categories & Tags
**Categories**: vue-extensions
**Tags**: Vue, img-preview, vue-img, 图片预览, vue3
## README
## hevue-img-preview 简介
```javascript
// 增加功能: 图片预览图使用thumbnail图
const handleClick = (filePath: string) => {
const imgs = tableData.value.filter((item: any) => !isVideo(item.filePath)).map((item: any) => item.filePath);
const thumbnails = tableData.value
.filter((item: any) => !isVideo(item.filePath))
.map((item: any) => item.thumbnailPath);
const index = imgs.findIndex((item: any) => item === filePath);
previewImages({
imgList: imgs,
thumbnailsList: thumbnails,
nowImgIndex: index > -1 ? index : 0
});
};
```
中文 | [English](./README.en.md)
hevue-img-preview是一个基于 vue 编写的 vue 图片预览组件，已对vue2和vue3同时兼容，支持 pc 和手机端，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果。手机端支持单指拖拽和双指缩放。页面各组件颜色均可自定义，实现个性化设计，如果能帮上你，希望可以移步 [GitHub](https://github.com/heyongsheng/hevue-img-preview) ，或者[码云](https://gitee.com/ihope_top/hevue-img-preview) 给个小星星，如果有任何使用意见或建议，也欢迎回复或者提交 issure
特色：
`单图预览` `多图预览` `单图预览` `缩略图` `快捷键` `自定义旋转` `切换图片事件回调` `关闭事件回调` `PC端` `移动端` `保存图片` `自定义样式`
## 官方文档
> 中国用户请访问 [https://img-preview-doc.it1996.com](https://img-preview-doc.it1996.com)
> 国际用户请访问 [https://heyongsheng.github.io/en](https://heyongsheng.github.io/en)
> 本文档仅介绍部分使用方式，更多请访问官方文档
## 安装
使用npm进行安装
```bash
npm install hevue-img-preview
```
在main.js进行全局引入
```javascript
// vue2.x
import hevueImgPreview from 'hevue-img-preview/v2'
Vue.use(hevueImgPreview)
// vue3.x
import hevueImgPreview from 'hevue-img-preview/v3'
const app = createApp(App)
app.use(hevueImgPreview)
app.mount('#app')
```
## 使用
在组件中进行使用
***vue2***
```html
![]()
```
```javascript
methods: {
previewImg (url) {
this.$hevueImgPreview(url)
}
}
```
***vue3***
```html
![]()
```
```javascript
import { previewImages } from 'hevue-img-preview/v3' // [!code focus]
const handleClick = () => { // [!code focus]
previewImages('/1.png') // [!code focus]
}
```
### 配置项
预览方法接受参数可以为单个图片路径，也可以为图片数组，或以下配置项
| 属性名 | 说明 | 类型 | 默认值 |
| --------------------- | ------------- | ---------- | ----- |
| imgList | 预览的图片地址 | `array` | - |
| nowImgIndex | 传入多图时当前图片的下标 | `number` | 0 |
| thumbnail | 显示缩略图 | `boolean` | true |
| thumbnailsList | 缩略图列表 | `array` | 默认使用imgList |
| controlBar | 底部控制条配置 | `array` | [] |
| closeBtn | 显示右上角关闭按钮 | `boolean` | true |
| arrowBtn | 显示左右切换按钮 | | |
| clickMaskCLose | 点击遮罩层是否关闭图片预览 | `boolean` | true |
| disabledImgRightClick | 禁止图片右击事件 | `boolean` | false |
| disableTransition | 禁止过渡效果 | `boolean` | false |
| customStyle | 自定义样式 | `object` | - |
| themeName | 主题名称 | `string` | - |
| zIndex | 插件层级 | `number` | 9999 |
| closeFn | 插件关闭回调函数 | `Function` | - |
| changeFn | 多图切换回调函数 | `Function` | - |
| locale | 语言 | `string` | zhCN |
## 更新日志
### 7.1.3
- 缩略图列表支持单独传入，如果您需要预览的图片数量较多或者质量较大，您可以使用thumbnailsList字段单独传入压缩后后的预览图
### 7.0.0
- 新增底部预览图
- 新增支持cdn方式引入
- 新增禁用图片右击事件
- 新增底部控制条下载功能
- 新增底部控制条单个控制项的显示控制
- 新增底部控制条左右切换功能（仅多图预览时生效）
- 新增底部控制条自定义角度旋转
- 底部控制条新增快捷键键位帮助
- 新增预置主题
- 新增大量交互的过渡效果（可禁用）
- 新增双语支持
- 优化自定义样式支持，可控制项更多
- 优化图片切换逻辑，已加载过的图片再次切换时不会重新加载
- 优化vue2及vue3的全局使用及局部使用方式
### 6.1.0
支持切换图片及关闭图片回调函数，想起请阅读文档
### 6.0.0
组件兼容vue3.x
### 5.0.2
组件支持实例化，调用组件将返回组件实例，支持直接通过实例关闭弹窗
```javascript
const hevueImgPreviewEl = this.$hevueImgPreview(...)
hevueImgPreviewEl.close()
```
## 反馈与支持
如果您在使用过程中有任何问题或建议都可以提交issue，或者通过一下方式进行交流。
作者 QQ：1378431028
QQ 群：595472617
邮箱：1378431028@qq.com
作者微信：heyongsheng1996
