vue-pin-image
TypeScript icon, indicating that this package has built-in type declarations

1.0.1Β β€’Β PublicΒ β€’Β Published

πŸ“Œ Vue Pin Image

An easy to use image marker library for vue3

Installation

npm install --save vue-pin-image

or

yarn add vue-pin-image

or

pnpm i vue-pin-image

Usage

Import the magic zoom componet.

import { PinImage } from "vue-pin-image"

Use it in a Vue componens

const markers = ref([]);
watchEffect(() => {
    console.log(markers.value);
})

<PinImage src="/default-image.jpg" v-model:markers="markers" />

This will render the image and when you hover over it, it will show a little lens with a zoomed in version

The MagicZoom component accepts the following props:

Prop Type Default Description
markers Array[{ x: number, y: number }] - Required. This will store all your markers
disable Boolean false Optional. This prop makes the pins disabled and removes pointer events.

Support

For any feedback or to report any issues or general implementation support, please reach out to komi@yorgsoft.com

License

Released under the MIT license.

Package Sidebar

Install

npm i vue-pin-image

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

18.5 kB

Total Files

8

Last publish

Collaborators

  • komig