@bryce-loskie/mz
TypeScript icon, indicating that this package has built-in type declarations

0.2.1 • Public • Published

MZ

NPM version

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

Package Sidebar

Install

npm i @bryce-loskie/mz

Weekly Downloads

0

Version

0.2.1

License

MIT

Unpacked Size

33.7 kB

Total Files

7

Last publish

Collaborators

  • guygubaby