# @lx-vue-materiel/img-preview

> > TODO: description

Latest version **1.1.2** (published 2023-11-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install @lx-vue-materiel/img-preview
pnpm add @lx-vue-materiel/img-preview
yarn add @lx-vue-materiel/img-preview
bun add @lx-vue-materiel/img-preview
```

## 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.1.2 |
| Published | 2023-11-02 |
| First published | 2021-09-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 55.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | huangjingyang |
| Maintainers | haiyulu, chenzian, mind29, lichao.franklee, owen.huang, simba.wang, tiny.tu, yuki.liu, jeely, pok.h |

## Links

- npm: https://www.npmjs.com/package/@lx-vue-materiel/img-preview
- Repository: git@gitlab.lixinio.com:frontend/lx-vue-materiel
- npm.io page: https://npm.io/package/@lx-vue-materiel/img-preview

## Dependencies (1)

- [vue-property-decorator](https://npm.io/package/vue-property-decorator.md) ^9.1.2

## Recent versions

- 1.1.2 (latest) — 2023-11-02
- 1.1.1 — 2023-11-02
- 1.1.0 — 2023-07-19
- 1.1.0-beta.1 — 2022-09-26
- 1.0.9 — 2021-09-10
- 1.0.8 — 2021-09-09
- 1.0.7 — 2021-09-09
- 1.0.6 — 2021-09-09
- 1.0.5 — 2021-09-09
- 1.0.3 — 2021-09-09
- 1.0.2 — 2021-09-02
- 1.0.1 — 2021-09-02
- 1.0.0 — 2021-09-02
- 1.0.1-beta.1 — 2021-09-02

## README

### 注意：图片 下载按钮
__暂不支持跨域图片下载，如需要支持可与后台协商支持，或者使用img.onload + HTMLCanvasElement.toDataURL() 自定义下载按钮,（该方法不支持png透明背景图片）__

### 组件形式打开
```html
 <ImgPreview
  :imgsData="imgsData"
  :showIndex="showIndex"
  :visible.sync="visible"
  :options="{}"
></ImgPreview>
```

1. 传入props  

|  props   | 说明  | 类型 |默认值 |
|  ----  | ----  | ---- |---- |
| visible.sync  | 预览组件是否展示 | boolean | false |
| imgsData  | 图片数组,请传入字符串数组格式 | array | [] |
| showIndex  | 展示图片索引 | number | 0 |
| options  | 配置对象 | object | {} |

2. 配置对象options说明，不传代表默认  

|  key   | 说明  | 类型 |默认值 |
|  ----  | ----  | ---- |---- |
| clickMaskClose | 点击mask是否关闭图片 | boolean | false |
| closeIcon  | 是否展示关闭按钮 | boolean | true |
| width  | 图片默认显示宽度。 高度自适应 | number | 800 |
| scale  | 缩放 按钮 | boolean | true |
| rotateLeft  | 顺时针旋转 按钮 | boolean | true |
| rotateRight  | 逆时针旋转 按钮 | boolean | false |
| download  | 下载 按钮 | boolean | false |
| stepScale  | 缩放step  （建议不修改） | number | 0.1 |
| maxScale  | 最大放大倍数 （建议不修改） | number | 5 |
| minScale  | 最小放大倍数 （建议不修改） | number | 0.1 |
| stepRotate  |  默认每次旋转度数 90 度 （建议不修改） | number | 90 |
| isAnimation  | 是否执行缩放等动画 （建议不修改） | boolean | true |
| downloadName  | 下载图片名称 | string | 'timp.jpg' |

3. 提供插槽slot name=previewEdit 可自定义底部按钮，传递参数index 当前图片的索引值


### 引入调用和全局引入调用形式打开HTMLCanvasElement.toDataURL()
1. 引入调用
```js
import imgPreview from '@lx-vue-materiel/img-preview';
// 展示
ImgPreview.visible({
  imgsData: [], // 图片数组,请传入字符串数组格式
  showIndex: 0,  // 展示图片索引
  options: {} // 配置对象
})
// 隐藏
ImgPreview.hide()
```

2. 全局引入调用
```js
import imgPreview from '@lx-vue-materiel/img-preview';
Vue.use(ImgPreview)

// 展示
this.ImgPreview.visible({
  imgsData: [], // 图片数组,请传入字符串数组格式
  showIndex: 0,  // 展示图片索引
  options: {} // 配置对象
})
// 隐藏
this.ImgPreview.hide()
```

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