1.0.0 • Published 4 years ago
vue-zooming-image v1.0.0
vue-zooming-image
A simple vue component to hold an image which will zoom towards the position of the cursor. Originally written to hold preview thumbnails in conjunction with a lightbox.
Demo
Installation via NPM
npm i vue-zooming-image
Usage
<template>
<div id="app">
<ZoomingImage
src="./image.png"
width="375px"
height="250px">
<div>Overlay content</div>
</ZoomingImage>
</div>
</template>
<script>
import ZoomingImage from 'vue-zooming-image'
export default {
name: 'App',
components: {
ZoomingImage
}
}
</script>
Options
Props
Prop | Description |
---|---|
src | Path to the image to display |
width | width of the image (in pixels) |
height | height of the image (in pixels) |
Slots
The component provides a single, unnamed slot as an overlay for the image.