# vue2-viewer

> vue ui工具集合，包含移动端提示Toast，全局加载Indicator，六位密码数据等

Latest version **1.0.5** (published 2024-01-03) · 0 weekly downloads

## Install

```sh
npm install vue2-viewer
pnpm add vue2-viewer
yarn add vue2-viewer
bun add vue2-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.5 |
| Published | 2024-01-03 |
| First published | 2019-03-01 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 560.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 14 |
| Maintainers | marvengong |
| Keywords | viewer, vue2-viewer, vue图片预览 |

## Links

- npm: https://www.npmjs.com/package/vue2-viewer
- Repository: https://github.com/MarvenGong/vue2-viewer
- Homepage: https://marvengong.github.io/vue2-viewer/dist/
- Issues: https://github.com/MarvenGong/vue2-viewer/issues
- npm.io page: https://npm.io/package/vue2-viewer

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [core-js](https://npm.io/package/core-js.md) ^3.4.3
- [vue2-animate](https://npm.io/package/vue2-animate.md) ^2.1.0

## Recent versions

- 1.0.5 (latest) — 2024-01-03
- 1.0.3 — 2019-12-26
- 1.0.2 — 2019-12-17
- 1.0.1 — 2019-12-16
- 0.1.2 — 2019-12-16
- 0.1.1 — 2019-04-25
- 0.1.0 — 2019-04-12
- 0.0.5 — 2019-04-03
- 0.0.4 — 2019-03-01
- 0.0.3 — 2019-03-01
- 0.0.2 — 2019-03-01
- 0.0.1 — 2019-03-01

## README

# vue2-viewer

## github 仓库地址

[点击前往 vue2-viewer github 地址](https://github.com/MarvenGong/vue2-viewer)

> vue2-viewer 是一款强大的图像浏览插件，可以实现图像的放大预览，旋转，任意比例放大和缩小等功能

vue2-viewer 是 viewer.js vue 的实现，效果以及样式完全移植自 viewer.js 关于 viewer.js 可以参考链接
[http://fengyuanchen.github.io/viewer/]

插件中所有的效果均大量地使用了 css3 的新特性替换了 viewer.js 中的 js 动画，所以 vue2-viewer 主要实用场景是现代浏览器中。

## 演示地址

[戳这里前往 view2-viewer 演示地址>>](https://marvengong.github.io/vue2-viewer/dist/)

## 版本说明

- 1.0.3 处理列表数据问题
- 1.0.2 解决样式未生效问题
- 1.0.1 更换脚手架，修改图片切换后状态没重置的问题
- 0.1.0 正式上线版本
- 0.0.1 修改了放大后图片的标题无法显示的问题，新增 title 组件属性

## 使用文档

#### 安装

```javascript
npm install --save vue2-viewer
```

#### 在 main.js 中引入并使用插件

```javascript
import ImageViewer from "vue2-viewer";
Vue.use(ImageViewer);
```

插件会在全局注册 vue-viewer 组件

#### 使用组件

vue2-viewer 提供两种使用模式，单图片模式和多图列表模式。

##### 单图片模式

props

| 参数  |                说明                |  类型  | 必须  |
| :---: | :--------------------------------: | :----: | :---: |
| thumb |         要显示的小图的链接         | string | true  |
| full  |        点击放大后的大图链接        | string | true  |
| title | 点击放大后大图下面要展示的图片说明 | string | false |

示例：

```html
<vue-viewer style="display: inline-block" :thumb="image" :full="image">
</vue-viewer>
<script>
  export default {
    name: "app",
    data() {
      return {
        msg: "vue2-viewer-test",
        image:
          "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3427452369,2586833644&fm=173&app=25&f=JPEG?w=580&h=347&s=908FF35A050626E2428C001E030090D6",
      };
    },
  };
</script>
```

效果展示：

![单个图片预览](https://static.fastmock.site/images/vue2-viewer/vue2-viewer-single.gif)

##### 多图片模式

props

|     参数      |                                                        说明                                                         |  类型  | 必须  |
| :-----------: | :-----------------------------------------------------------------------------------------------------------------: | :----: | :---: |
|     thumb     |                                             要显示的小图列表的链接数组                                              | array  | true  |
|     full      |                                             点击放大后的大图的链接数组                                              | array  | true  |
|     title     |                                点击放大后大图下面要展示的图片说明数组,与图片一一对应                                | array  | false |
| list-ul-class | 默认小图的列表外层 ul 的自定义 class 用于自定义列表的样式，包括 ul 内部的 slot 的内容的样式都可以通过这个方式自定义 | string | false |

Scoped Slot

| name |                   说明                   |
| :--: | :--------------------------------------: |
|  ~   | 列表中的每一个元素中除了默认图以外的内容 |

示例：

```html
<vue-viewer
  multiple
  :thumb="imageList"
  list-ul-class="image-list"
  :full="imageList"
>
  <!--在列表中加入右上角删除按钮-->
  <template slot-scope="target">
    <span class="icon-remove" @click.stop="onRemove(target.index)" style=""
      >&times;</span
    >
  </template>
</vue-viewer>
<script>
  export default {
    name: "app",
    data() {
      return {
        msg: "vue2-viewer-test",
        imageList: [
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550224739247&di=512032866bea6329b1e46c735d50ac8b&imgtype=0&src=http%3A%2F%2Fimglf2.ph.126.net%2FdHH6OM2rD8JucPGAotUfag%3D%3D%2F6608219914074710297.jpg",
          "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=488030022,1694816207&fm=173&app=25&f=JPEG?w=580&h=347&s=A08FB35A5E0616C664F5631C030010D6",
          "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=2574767313,3929397124&fm=173&app=25&f=JPEG?w=580&h=868&s=B784EEA3460236E17A1F137F0300A058",
        ],
      };
    },
    methods: {
      onRemove(index) {
        alert(index);
      },
    },
  };
</script>
<style>
  .image-list {
    margin: 0;
    padding: 0;
  }
  .image-list li {
    display: inline-block;
    margin: 0 10px;
    list-style: none;
    position: relative;
  }
  .image-list li img {
    box-shadow: 0 0 5px #333;
  }
  .icon-remove {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    background: #f33;
    position: absolute;
    top: -10px;
    right: -10px;
    border-radius: 10px;
    cursor: pointer;
    color: #fff;
  }
  a {
    color: #42b983;
  }
</style>
```

效果展示：

![单个图片预览](https://static.fastmock.site/images/vue2-viewer/vue2-viewer-multi.gif)

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