🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

img-vuer3

Package Overview
Dependencies
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

img-vuer3

img viewer

1.0.3
latest
Source
npm
Version published
Weekly downloads
89
140.54%
Maintainers
1
Weekly downloads
 
Created
Source

img-vuer

For Vue2: https://github.com/ssshooter/img-vuer/tree/legacy

An Mobile-First image viewer for Vue3

中文 README

  • :ok_woman: Easy to use
  • :point_right: Swipe gesture
  • :mag: Zoom gesture
  • Now you can use thumbnail~
  • Gallery hide when the physical back button is pressed (android device only)
  • Fix blurry after using scale()
  • :computer: compatible with PC

Now you can use both Mobile and PC Browser :satisfied:

live demo

or scan the QRcode

Install

npm i img-vuer3 --save

Usage

// import img-vuer and install
import gallery from 'img-vuer3'
import 'img-vuer3/dist/style.css'

app.use(gallery, {
  swipeThreshold: 150, // default 100
  isIndexShow: true, // show image index, default true
  useCloseButton: true, // trigger gallery close with close button, default true
  preload: true, // preload images in the same group, default true
  sliderBackgroundColor: 'rgba(0,0,0,0.6)',
  sliderZIndex: 1001,
})
<!-- add direact to <img> -->
<img v-gallery :src="..." />

<!-- group images -->
<img v-gallery:groupName :src="..." />
<img v-gallery:groupName :src="..." />
<img v-gallery:groupName :src="..." />

<!-- OR (dynamic bind) -->
<img v-gallery="'groupName'" :src="..." />

<!-- use thumbnail, new in 0.11.0 -->
<img v-gallery :src="thumbnailSrc" data-large="originSrc" />

<!-- trigger close gallery, new in 0.14.0 -->
<button @click="$imgVuer.close()">close</button>

API

apiargdescription
close()/close the viwer
onIndexChange()cb$imgVuer.onIndexChange((newVal, oldVal)=>{...})
onToggle()cbon close or on open $imgVuer.onToggle((newVal, oldVal)=>{...})
changeBGColor()colorchange the background color of viwer $imgVuer.changeBGColor('#fff')
next()/switch to next image $imgVuer.next()
prev()/switch to previous image $imgVuer.prev()
getCurrentIndex()//

Development

npm install

npm run dev

npm run build-lib

Troubleshooting

Abnormal page scale

Add meta

<meta
  name="viewport"
  content="width=device-width, initial-scale=1,user-scalable=0, maximum-scale=1"
/>

for a large number of large images

If you group a large number of large images, img-vuer will load all image in the same group, so it will cause unnecessary mobile data traffic and slow the page down.

You can use preload option in this situation and img-vuer will only load the image you watched.

key

Should not use index as key for the component which is added v-gallery.

License

MIT

Keywords

vue

FAQs

Package last updated on 01 Mar 2024

Did you know?

Socket

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