# image-view

> 图片放大、图片原位置放大，缩小回到原位置

Latest version **1.0.6** (published 2023-06-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install image-view
pnpm add image-view
yarn add image-view
bun add image-view
```

## 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.6 |
| Published | 2023-06-21 |
| First published | 2023-06-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | xydideo |
| Maintainers | xydideo |
| Keywords | 图片放大, 图片原位置放大, 图片原位置缩小 |

## Links

- npm: https://www.npmjs.com/package/image-view
- npm.io page: https://npm.io/package/image-view

## Recent versions

- 1.0.6 (latest) — 2023-06-21
- 1.0.5 — 2023-06-21
- 1.0.4 — 2023-06-21
- 1.0.3 — 2023-06-20
- 1.0.2 — 2023-06-16
- 1.0.1 — 2023-06-16
- 1.0.0 — 2023-06-16

## README

# image-view

## 组件介绍

image-view是一个点击图片放大的组件，支持原位置进行运动放大，缩小至原位置交互体验，如下图：https://xydideo.gitee.io/blog/public-image/image-view.gif

![图片预览](https://xydideo.gitee.io/blog/public-image/image-view.gif)

## 组件依赖

vue3、less（vue2也支持）


## 组件使用

```html
<template>
  <div class="page">
    <div>
      <img :src="item" alt="" srcset="" v-for="(item,index) in list" :key="index" @click="handleClick">
    </div>

    <image-view ref="imgViewRef" :isShow="isShow" @close="isShow=false" />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue"

// 引入组件
import { ImageView } from 'image-view'
import 'image-view/style.css'

// 获取全局在main.js中引入
// import ImageView from 'image-view'
// import 'image-view/style.css'
// app.use(ImageView)

const imgViewRef = ref(null)
const isShow = ref(false)
const list = ref([
  "https://mail.qq.com/zh_CN/htmledition/images/favicon/qqmail_favicon_96h.png",
  "https://undesign.learn.uno/icon.png",
  "https://cdn.apifox.cn/logo/apifox-logo-512.png",
])

// 点击图片
function handleClick(event) {
  isShow.value = true
  imgViewRef.value.imageView(event)
}
</script>

<style lang="less" scoped>
img {
  width: 100px;
  height: 100px;
  margin: 12px;
}
</style>
```


## 组件api

### Props

| 参数      | 说明             | 类型    | 默认值  |
|-----------|----------------|---------|---------|
| isShow    | 是否显示预览     | Boolean | `false` |
| bgOpacity | 背景色的不透明度 | Number  | `0.96`  |

### Events

| 参数      | 说明                                                         | 回调参数 |
|-----------|------------------------------------------------------------|----------|
| close     | 关闭预览                                                     | -        |
| imageView | 图片预览（子组件的方法）通过refs进行调用，传当前点击图片的event | -        |

---
_Source: https://npm.io/package/image-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._