
Product
Secure Your AI-Generated Code with Socket MCP
Socket MCP brings real-time security checks to AI-generated code, helping developers catch risky dependencies before they enter the codebase.
For Vue2: https://github.com/ssshooter/img-vuer/tree/legacy
An Mobile-First image viewer for Vue3
Now you can use both Mobile and PC Browser :satisfied:
or scan the QRcode
npm i img-vuer3 --save
// 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 | arg | description |
---|---|---|
close() | / | close the viwer |
onIndexChange() | cb | $imgVuer.onIndexChange((newVal, oldVal)=>{...}) |
onToggle() | cb | on close or on open $imgVuer.onToggle((newVal, oldVal)=>{...}) |
changeBGColor() | color | change the background color of viwer $imgVuer.changeBGColor('#fff') |
next() | / | switch to next image $imgVuer.next() |
prev() | / | switch to previous image $imgVuer.prev() |
getCurrentIndex() | / | / |
npm install
npm run dev
npm run build-lib
Add meta
<meta
name="viewport"
content="width=device-width, initial-scale=1,user-scalable=0, maximum-scale=1"
/>
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.
Should not use index as key for the component which is added v-gallery
.
MIT
FAQs
img viewer
The npm package img-vuer3 receives a total of 77 weekly downloads. As such, img-vuer3 popularity was classified as not popular.
We found that img-vuer3 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 MCP brings real-time security checks to AI-generated code, helping developers catch risky dependencies before they enter the codebase.
Security News
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
Research
Security News
Socket’s Threat Research Team has uncovered 60 npm packages using post-install scripts to silently exfiltrate hostnames, IP addresses, DNS servers, and user directories to a Discord-controlled endpoint.