@bryce-loskie/mz

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>

License

MIT License © 2022 guygubaby