Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

vue 图片预览组件，支持 pc 和手机端，支持单图和多图预览，支持vue2和vue3，配备官方文档。A Vue image preview component that supports both PC and mobile, single and multiple image preview, compatible with both Vue 2 and Vue 3, and comes with official documentation.

License

NotificationsYou must be signed in to change notification settings

heyongsheng/hevue-img-preview

Repository files navigation

starstardownloadsGitHub release (latest by date)downloads
// 增加功能: 图片预览图使用thumbnail图consthandleClick=(filePath:string)=>{constimgs=tableData.value.filter((item:any)=>!isVideo(item.filePath)).map((item:any)=>item.filePath);constthumbnails=tableData.value.filter((item:any)=>!isVideo(item.filePath)).map((item:any)=>item.thumbnailPath);constindex=imgs.findIndex((item:any)=>item===filePath);previewImages({imgList:imgs,thumbnailsList:thumbnails,nowImgIndex:index>-1 ?index :0});};

中文 |English

hevue-img-preview是一个基于 vue 编写的 vue 图片预览组件，已对vue2和vue3同时兼容，支持 pc 和手机端，支持单图和多图预览，仅传入一个图片地址，即可实现图片预览效果。手机端支持单指拖拽和双指缩放。页面各组件颜色均可自定义，实现个性化设计，如果能帮上你，希望可以移步GitHub ，或者码云 给个小星星，如果有任何使用意见或建议，也欢迎回复或者提交 issure

特色：

单图预览多图预览单图预览缩略图快捷键自定义旋转切换图片事件回调关闭事件回调PC端移动端保存图片自定义样式

官方文档

中国用户请访问https://img-preview-doc.it1996.com国际用户请访问https://heyongsheng.github.io/en本文档仅介绍部分使用方式，更多请访问官方文档

安装

使用npm进行安装

npm install hevue-img-preview

在main.js进行全局引入

// vue2.ximporthevueImgPreviewfrom'hevue-img-preview/v2'Vue.use(hevueImgPreview)// vue3.ximporthevueImgPreviewfrom'hevue-img-preview/v3'constapp=createApp(App)app.use(hevueImgPreview)app.mount('#app')

使用

在组件中进行使用

vue2

<img:src="url"@click="previewImg(url)">
methods:{previewImg(url){this.$hevueImgPreview(url)}}

vue3

<img:src="url"@click="previewImg(url)">
import{previewImages}from'hevue-img-preview/v3'// [!code focus]consthandleClick=()=>{// [!code focus]previewImages('/1.png')// [!code focus]}

配置项

预览方法接受参数可以为单个图片路径，也可以为图片数组，或以下配置项

属性名说明类型默认值
imgList预览的图片地址array-
nowImgIndex传入多图时当前图片的下标number0
thumbnail显示缩略图booleantrue
thumbnailsList缩略图列表array默认使用imgList
controlBar底部控制条配置array[]
closeBtn显示右上角关闭按钮booleantrue
arrowBtn显示左右切换按钮
clickMaskCLose点击遮罩层是否关闭图片预览booleantrue
disabledImgRightClick禁止图片右击事件booleanfalse
disableTransition禁止过渡效果booleanfalse
customStyle自定义样式object-
themeName主题名称string-
zIndex插件层级number9999
closeFn插件关闭回调函数Function-
changeFn多图切换回调函数Function-
locale语言stringzhCN

更新日志

7.1.3

  • 缩略图列表支持单独传入，如果您需要预览的图片数量较多或者质量较大，您可以使用thumbnailsList字段单独传入压缩后后的预览图

7.0.0

  • 新增底部预览图
  • 新增支持cdn方式引入
  • 新增禁用图片右击事件
  • 新增底部控制条下载功能
  • 新增底部控制条单个控制项的显示控制
  • 新增底部控制条左右切换功能（仅多图预览时生效）
  • 新增底部控制条自定义角度旋转
  • 底部控制条新增快捷键键位帮助
  • 新增预置主题
  • 新增大量交互的过渡效果（可禁用）
  • 新增双语支持
  • 优化自定义样式支持，可控制项更多
  • 优化图片切换逻辑，已加载过的图片再次切换时不会重新加载
  • 优化vue2及vue3的全局使用及局部使用方式

6.1.0

支持切换图片及关闭图片回调函数，想起请阅读文档

6.0.0

组件兼容vue3.x

5.0.2

组件支持实例化，调用组件将返回组件实例，支持直接通过实例关闭弹窗

consthevueImgPreviewEl=this.$hevueImgPreview(...)hevueImgPreviewEl.close()

反馈与支持

如果您在使用过程中有任何问题或建议都可以提交issue，或者通过一下方式进行交流。

作者 QQ：1378431028

QQ 群：595472617

邮箱：1378431028@qq.com

作者微信：heyongsheng1996

About

vue 图片预览组件，支持 pc 和手机端，支持单图和多图预览，支持vue2和vue3，配备官方文档。A Vue image preview component that supports both PC and mobile, single and multiple image preview, compatible with both Vue 2 and Vue 3, and comes with official documentation.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors5

[8]ページ先頭
©2009-2025 Movatter.jp