hana-img-viewer v0.0.0

hana-img-viewer

A lightweight and easy-to-use image previewer for Vue 3.

Features

• Support touch gestures, drag and pan physical effect sliding, two-finger specified position to zoom in and out
• Based on typescript, type safe
• Just like use the <img> tag, you can use the src attribute to specify the image source

Installation

pnpm add hana-img-viewer -D

Basic Usage

1. partial import

You can just import the component where you need it.

<script setup lang="ts">
import { HanaImgViewer } from 'hana-img-viewer'
import demoImg from '../assets/114388636.jpg'
</script>

<template>
  <div class="wrapper">
    <hana-img-viewer :src="demoImg" :alt="demoImg" />
  </div>
</template>

2. global registration

In your Vue3 + TypeScript project, you can register the component globally in the main.ts file.

import { createApp } from 'vue'
import App from './App.vue'
import HanaImgViewer from 'hana-img-viewer'

const app = createApp(App)

app.use(HanaImgViewer)

app.mount('#app')

Then you can use the component in any .vue file.

<script setup lang="ts">
// import { HanaImgViewer } from 'hana-img-viewer' // no need to import
import demoImg from '../assets/114388636.jpg'
</script>

<template>
  <div class="wrapper">
    <hana-img-viewer :src="demoImg" :alt="demoImg" />
  </div>
</template>

Props

以下是提供的所有属性：

License

MIT