MZ
A zoom image component for vue3 using medium-zoom
Get Started
pnpm i @bryce-loskie/mz<script setup lang="ts">
import ZoomImage, { defineZoomOptions } from '@bryce-loskie/mz'
const imageSrcList = ['https://foo.com.png']
const options = defineZoomOptions({
background: '#fff',
margin: 24,
})
</script>
<template>
<div>
<h1 mb="4">
Zoom Image
</h1>
<ul class="flex gap-2 flex-wrap">
<li v-for="img in imageSrcList" :key="img">
<ZoomImage alt="foo" :src="img" :zoom-options="options" class="w-40 h-auto" />
</li>
</ul>
</div>
</template>