vue3-img v0.0.3

vue3-img

As you see, it's a vue3 component to zoom <img> element. And there are two ways to use this function:

Basic Function

1. press the image to move it;
2. wheel mouse to zoom it(or zoom in Magic Trackpad);
3. press enter or double click image to reset the image style;
4. press esc or click mask to quit.

Advantages

1. Scale picture based on the mouse position.
2. Use css transform to move and scale picture. So it has better performance in theory.

Install

# with npm
npm install vue3-img

# with yarn
yarn add vue3-img

# with pnpm
pnpm add vue3-img

Quick Start

<script setup lang="ts">
  import Vue3Img from 'vue3-img'
  import 'vue3-img/dist/style.css'

  import image1 from '@/assets/img.1x.jpg'
  import image2 from '@/assets/img.2x.jpg'
  import fallbackImage from '@/assets/fallback.jpg'
</script>

<template>
  <Vue3Img src="https://xxx" />
  <Vue3Img :src="image1" :highDefinitionSrc="image2" :fallbackSrc="fallbackImage" />
</template>

Props

• src: The src link of img.
• fallbackSrc: If img loaded error, will load this link instead.
• highDefinitionSrc: If img loaded success, this component will load highDefinitionSrc or src to zoom.
• alt: Passed to img.