# lcy-image-viewer

> image viewer

Latest version **1.0.4** (published 2021-02-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install lcy-image-viewer
pnpm add lcy-image-viewer
yarn add lcy-image-viewer
bun add lcy-image-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 | 2021-02-02 |
| First published | 2020-12-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 267.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | LinCenYing |
| Maintainers | lincenying |
| Keywords | image, viewer |

## Links

- npm: https://www.npmjs.com/package/lcy-image-viewer
- Repository: https://github.com/lincenying/image-viewer
- Homepage: https://github.com/lincenying/image-viewer#readme
- Issues: https://github.com/lincenying/image-viewer/issues
- npm.io page: https://npm.io/package/lcy-image-viewer

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.6.12

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2021-02-02
- 1.0.3 — 2021-02-02
- 1.0.2 — 2020-12-03
- 1.0.1 — 2020-12-03
- 1.0.0 — 2020-12-03

## README

# image-viewer

##### install

```bash
yarn add image-viewer
# or
npm install image-viewer --save
```

```
prop:
z-index: z轴
initial-index: 当前图片的index
on-close: 关闭回调事件
on-switch: 切换图片回调事件
close-on-click-mask: 是否可以点击遮罩层关闭
url-list: 图片地址数组
```

```javascript
import imageViewer from 'image-viewer'
Vue.use(imageViewer)
```

```html
<image-viewer
    v-if="image.visible"
    :z-index="99"
    :initial-index="image.index"
    :on-close="ccc"
    :on-switch="onSwitch"
    :close-on-click-mask="true"
    :url-list="image.imgUrl"
/>
```

```javascript
export default {
    data() {
        return {
            image: {
                visible: false,
                index: 0,
                imgUrl: []
            }
        }
    },
    mounted() {
        this.image.imgUrl = ['图片1', '图片2']
        this.image.index = 0
        this.image.visible = true
    },
    methods: {
        closeViewer() {
            this.image.visible = false
        },
        onSwitch() {}
    }
}
```

License

MIT

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