heyongsheng/hevue-img-preview

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

hevue-img-preview's Issues

【功能建议】增加自定义初始大小

如果图片分辨率大，那就会占满整个屏幕，看着不太友好。

能不能，自定义初始化的大小，或者默认缩放比例

only one instance of babel-polyfill is allowed

我本地已经装过babel-polyfill了， 怎么兼容啊。。。 包里面的能单独去掉嘛

大哥 你这个webpack打包配置不能直接根据环境切参数嘛

webpack.config.js ↓
为啥要特地写这样
// entry: './src/main.js', // 本地运行用这个
entry: "./src/lib/index.js", // 线上打包用这个

这么改行不行

const isProd=process.env.NODE_ENV==='production';

module.exports = {
entry: isProd?"./src/lib/index.js":'./src/main.js',

安卓手机微信浏览器主题bug

theme为light的时候模糊效果失效

预览问题

图片太长，直接导致关闭按钮挤掉不见了～～～

预览线上图片的时候会闪现一秒裂图再正常打开

层级问题

目前遇到的问题是，我在dialog中调用，饿了吗UI 会出现层级问题。哪怕我深度选择设置z-index也不会在第一层。求助

有下载的功能吗

添加一个自定义设置层级，固定层级特殊情况无法处理

使用 vitepress 打包报错

支持默认图片

• 图片不可访问、期待传入默认图，而不是裂开的图

ios 关闭按钮错位

不支持移动端吗

预览会加载两次图片

可以支持下载么？

这行console在生产环境下有点不友好, 尽快删除吧

hevue-img-preview/index.js

Line 67 in 3c68b7b

console.log(_vue);

能否增加自定义control-bar

本地图片直接放url不行，需要使用require先导入图片

const urlArr = this.detailInfo.fj.map(item => {
return require(@/assets/images/fj/${item})
})
this.$hevueImgPreview({
multiple: true, // 开启多图预览模式
nowImgIndex: index, // 多图预览，默认展示第二张图片
imgList: urlArr, // 需要预览的多图数组
})

打开预览后，浏览器后退不会关闭

能否加个控制关闭的方法，或者是获取实例的方法

多图预览报错

增加全局默认配置

例如我想全局关闭 keyboard 现在需要在每个调用的地方都要传 keyboard: 'close'

现有的模式是 默认配置都硬编码在代码里了，最好是有 defaultConfig ，这样可以通过修改 defaultConfig 达到全局配置的目的。

keyboard: 'open' / 'close' 不太优雅吧。

keyboard: true / false  // vue props 里面记得加校验

option.keyboard !== undefined ? option.keyboard : defaultConfig.keyboard 

能否支持左右箭头切换上一张下一张？

建议支持左右箭头切换上一张和下一张，或者将切换的方法暴露出来，让调用者自定义设置。

怎么设置遮罩层背景色

设置mainBackground不起作用。

how to use it in nuxt3.example this code but report debug.

plugins/imgViewer.client.js

import imgViewer from 'hevue-img-preview'

const options={keyboard: true,clickMaskCLose: true};

export default defineNuxtPlugin(nuxtApp => {// defineNuxtPlugin 是全局的，不需要手动引入即可使用，不会报错
  nuxtApp.vueApp.use(imgViewer,options);
  return {provide:{imgViewer}};
})

other view page
useNuxtApp().$imgViewer(['a.jpg','b.jpg']);
report debug

Uncaught (in promise) TypeError: app.version is undefined
    install NuxtJS
    showImg manage.vue:182
    NuxtJS 4

您好，我觉得可以加上缩略图功能

使用 passive 优化 Event 滚动性能

我看到代码里面使用了很多 滚动Event，不使用默认行为的前提下 event.preventDefault() 可以使用 passive 来优化滚动性能。

Chrome 也会给出提示（我目前的版本是 97）。
[Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

对于 vue 来说，可以直接添加 .passive 修饰符，例如<div [@scroll.passive="onScroll">...</div>，文档

原生来说可以使用 document.addEventListener('mousewheel', handler, {passive: true}) ，但是要注意兼容性。可以用这个库 https://github.com/zzarcon/default-passive-events

本来想直接改了 PR 的，但是代码中有很多疑问

hevue-img-preview/hevue-img-preview.vue

Lines 207 to 210 in f812451

	let _dom = document.getElementById('hevue-imgpreview-wrap')
	_dom.onmousewheel = this.scrollFunc
	// 火狐浏览器没有onmousewheel事件，用DOMMouseScroll代替(滚轮事件)
	document.body.addEventListener('DOMMouseScroll', this.scrollFunc)

首先不建议使用 getElementById 去拿元素了，建议使用 vue 的 ref 拿到元素。并且建议直接在元素上通过 vue @mousewheel 直接绑定事件。这样 vue 会自动处理事件解绑，如果手动 addEventListener，建议在 vue 的 beforeDestroy 生命周期中 removeEventListener

这里是不是重复绑定了 onmousewheel 和 DOMMouseScroll 事件？
建议 onmousewheel = fn 转化为 addEventListener 的方式添加，因为后者可以使用 {passive: true} 优化性能，onmousewheel = fn 我暂时不知道如何优化，如有有人知道请指教。

是否支持Vue 3.2呢?

能提供点击遮罩关闭的功能么~

能提供点击遮罩关闭的功能么~

不晓得会不会跟拖拽有冲突~

能多张图片预览吗?

想传一个数组进去可以实现多张图片第地址预览