Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
hevue-img-preview
Advanced tools
Readme
本组件是一个基于 vue 编写的 vue 图片预览组件,支持 pc 和手机端,支持单图和多图预览,仅传入一个图片地址,即可实现图片预览效果。手机端支持单指拖拽和双指缩放。如果能帮上你,希望可以移步 GitHub ,或者码云 给个小星星,如果有任何使用意见或建议,也欢迎回复或者提交 issue
官方使用文档请访问 https://heyongsheng.github.io/#/
使用npm进行安装
npm install hevue-img-preview
在main.js进行全局引入
import hevueImgPreview from 'hevue-img-preview'
Vue.use(hevueImgPreview)
在组件中进行使用
<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'], // 需要预览的多图数组
})
字段 | 类型 | 默认值 | 备注 |
---|---|---|---|
url | String | 无 | 预览的图片地址,多图预览时省略 |
multiple | Boolean | false | 是否多图预览 |
nowImgIndex | Number | 0 | 多图预览时默认显示的图片下标 |
imgList | Array | 无 | 多图预览时传入的图片数组 |
keyboard | Boolean | false | 是否开启键盘控制 |
clickMaskCLose | Boolean | false | 是否可以点击遮罩层关闭 |
controlBar | Boolean | true | 是否显示控制条及页码 |
closeBtn | Boolean | true | 是否显示关闭按钮 |
arrowBtn | Boolean | true | 是否显示左右翻页按钮 |
对于某些配置,例如开启键盘事件,点击遮罩层关闭,我们可能要全局保持统一,但却需要在每一次调用时重复配置,为了解决这个问题,我们提供了全局配置项,您可以在引入插件的时候,将全局配置项作为第二个参数传入即可,以免再每次调用的时候重复配置。
// main.js
import hevueImgPreview from 'hevueImgPreview'
Vue.use(hevueImgPreview, {
keyboard: true,
clickMaskCLose: true
...
})
如开启键盘控制事件后,相对应功能控制按键如下
按键 | 功能 |
---|---|
w | 放大 |
s | 缩小 |
a | 上一张 |
d | 下一张 |
q | 逆时针旋转 |
e | 顺时针旋转 |
r | 图片复位 |
esc | 关闭图片预览 |
如不考虑兼容性问题,上述的背景颜色均可接收渐变色
本人前端小白一枚,工作经验较少,所写东西尽量保证没 bug,但性能界面什么的可能没办法做到最优,如果您有什么使用中的建议或意见,欢迎反馈给我,可以加联系方式,也可以直接回复,或者到
GitHub
提个issue
[建议此方法],如果对您有所帮助,万分期待您能给个赞并且到GitHub
给个小星星
作者 QQ:1378431028
QQ 群:595472617
作者微信:heyongsheng1996
FAQs
> 本组件是一个基于 vue 编写的 vue 图片预览组件,支持 pc 和手机端,支持单图和多图预览,仅传入一个图片地址,即可实现图片预览效果。手机端支持单指拖拽和双指缩放。页面各组件颜色均可可自定义,实现个性化设计,如果能帮上你,希望可以移步 [GitHub](https://github.com/heyongsheng/hevue-img-preview) ,或者[码云](https://gitee.com/ihope_top/hevue-img-preview) 给个小星星,如果有任何使用意见或建议
The npm package hevue-img-preview receives a total of 773 weekly downloads. As such, hevue-img-preview popularity was classified as not popular.
We found that hevue-img-preview demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.