Socket
Socket
Sign inDemoInstall

hevue-img-preview

Package Overview
Dependencies
0
Maintainers
1
Versions
43
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

hevue-img-preview

> 本组件是一个基于 vue 编写的 vue 图片预览组件,支持 pc 和手机端,支持单图和多图预览,仅传入一个图片地址,即可实现图片预览效果。手机端支持单指拖拽和双指缩放。页面各组件颜色均可可自定义,实现个性化设计,如果能帮上你,希望可以移步 [GitHub](https://github.com/heyongsheng/hevue-img-preview) ,或者[码云](https://gitee.com/ihope_top/hevue-img-preview) 给个小星星,如果有任何使用意见或建议


Version published
Maintainers
1
Weekly downloads
724
increased by27.02%
Bundle size
978 bytes
Minified + gzipped

Weekly downloads

Readme

Source

hevue-img-preview 简介

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

官方文档

官方使用文档请访问 https://heyongsheng.github.io/#/

安装

使用npm进行安装

npm install hevue-img-preview

在main.js进行全局引入


// vue2.x
import hevueImgPreview from 'hevue-img-preview'
Vue.use(hevueImgPreview)

// vue3.x
import hevueImgPreview from 'hevue-img-preview'
const app = createApp(App)
app.use(hevueImgPreview)
app.mount('#app')

在组件中进行使用

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

使用

this.$hevueImgPreview() 方法可以接收一个字符串类型的 url,或者对象类型的配置,具体使用方法如下

  • 接收一个地址字符串this.$hevueImgPreview(url)
this.$hevueImgPreview('https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg') // 线上地址
this.$hevueImgPreview('./img/logo.jpeg') // 本地地址
  • 接收一个对象this.$hevueImgPreview(options)
# 单图预览
this.$hevueImgPreview({
    url: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
})

# 多图预览
this.$hevueImgPreview({
    multiple: true, // 开启多图预览模式
    nowImgIndex: 1, // 多图预览,默认展示第二张图片
    imgList: ['1.png', '2.png', '3.png'], // 需要预览的多图数组
})

配置项

字段类型默认值备注
urlString预览的图片地址,多图预览时省略
multipleBooleanfalse是否多图预览
nowImgIndexNumber0多图预览时默认显示的图片下标
imgListArray多图预览时传入的图片数组
keyboardBooleanfalse是否开启键盘控制
clickMaskCLoseBooleanfalse是否可以点击遮罩层关闭
controlBarBooleantrue是否显示控制条及页码
closeBtnBooleantrue是否显示关闭按钮
arrowBtnBooleantrue是否显示左右翻页按钮
全局配置

对于某些配置,例如开启键盘事件,点击遮罩层关闭,我们可能要全局保持统一,但却需要在每一次调用时重复配置,为了解决这个问题,我们提供了全局配置项,您可以在引入插件的时候,将全局配置项作为第二个参数传入即可,以免再每次调用的时候重复配置。

// main.js

// vue2.x
import hevueImgPreview from 'hevueImgPreview'
Vue.use(hevueImgPreview, {
  keyboard: true,
  clickMaskCLose: true
  ...
})

// vue3.x
const app = createApp(App)
app.use(hevueImgPreview, {
  keyboard: true,
  clickMaskCLose: true
  ...
})
app.mount('#app')

如开启键盘控制事件后,相对应功能控制按键如下

按键功能
w放大
s缩小
a上一张
d下一张
q逆时针旋转
e顺时针旋转
r图片复位
esc关闭图片预览

更新日志

5.0.2

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

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

6.0.0

组件兼容vue3.x

求职广告

本人四年经验前端,急需前端职位,技术栈vue,element之类的,就是学历不太好,只有成人大专,有没有北京上海的大佬公司招人的,看看能不能给个机会,联系方式在下面

作者注

本人前端小白一枚,工作经验较少,所写东西尽量保证没 bug,但性能界面什么的可能没办法做到最优,如果您有什么使用中的建议或意见,欢迎反馈给我,可以加联系方式,也可以直接回复,或者到GitHub提个issue[建议此方法],如果对您有所帮助,万分期待您能给个赞并且到GitHub给个小星星

GitHub 链接:https://github.com/heyongsheng/hevue-img-preview

码云链接:https://gitee.com/ihope_top/hevue-img-preview

作者 QQ:1378431028

QQ 群:595472617

作者微信:heyongsheng1996

Keywords

FAQs

Last updated on 28 Mar 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc