# @chashao__/vue-img-viewer

> - [Getting started](#getting-started) - [Props](#props) - [Methods](#methods) - [Events](#events)

Latest version **1.0.4** (published 2023-10-10) · 0 weekly downloads

## Install

```sh
npm install @chashao__/vue-img-viewer
pnpm add @chashao__/vue-img-viewer
yarn add @chashao__/vue-img-viewer
bun add @chashao__/vue-img-viewer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2023-10-10 |
| First published | 2023-10-09 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 569 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | chashao__ |

## Links

- npm: https://www.npmjs.com/package/@chashao__/vue-img-viewer
- npm.io page: https://npm.io/package/@chashao__/vue-img-viewer

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.14
- [core-js](https://npm.io/package/core-js.md) ^3.8.3

## Recent versions

- 1.0.4 (latest) — 2023-10-10
- 1.0.3 — 2023-10-10
- 1.0.2 — 2023-10-09
- 1.0.1 — 2023-10-09
- 1.0.0 — 2023-10-09

## README

# vue-img-viewer

## Table of contents

- [Getting started](#getting-started)
- [Props](#props)
- [Methods](#methods)
- [Events](#events)

## Getting started

### Installation

```shell
npm install @chashao__/vue-img-viewer --save
```

### Usage

#### local component

```html
<template>
  <img-viewer :src="imgSrc"></img-viewer>
</template>

<script>
import ImgViewer from '@chashao__/vue-img-viewer'
export default {
  components: {
    ImgViewer
  },
  data () {
    return {
      imgSrc: ''
    }
  }
}
</script>
```

#### global component

```js
import Vue from vue
import ImgViewer from '@chashao__/vue-img-viewer'
Vue.use(ImgViewer)
```

## Props

### src

- type: `Boolean`
- required: `true`

Define where to get the original image URL for viewing

### autoZoom

- Type: `Boolean`
- Required: `true`

Whether the size is adaptive during initialization
### toolbar

- Type: `Boolean`
- Default: `true`

Specify the visibility of the toolbar

### movable

- Type: `Boolean`
- Default: `true`

Enable to move the image.

### rotatable

- Type: `Boolean`
- Default: `true`

Enable to rotate the image.

### flippable

- Type: `Boolean`
- Default: `true`

Enable to flip the image.

### zoomable

- Type: `Boolean`
- Default: `true`

Enable to zoom the image.
### zoomOnWheel

- Type: `Boolean`
- Default: `true`

Enable to zoom the image by wheeling the mouse.

### zoomRatio

- Type: `Number`
- Default: `0.1`

Define the ratio when zooming the image by wheeling the mouse.

## Methods

### reset()

reset the viewer.

## Events

### on-zoom

### on-rotate

---
_Source: https://npm.io/package/@chashao__/vue-img-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._