# vue-simple-picture-preview
> A Vue component to preview pictures
Latest version **1.3.8** (published 2019-05-24) · MIT license · 0 weekly downloads
## Install
```sh
npm install vue-simple-picture-preview
pnpm add vue-simple-picture-preview
yarn add vue-simple-picture-preview
bun add vue-simple-picture-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.3.8 |
| Published | 2019-05-24 |
| First published | 2018-05-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.8 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | heikaimu |
| Maintainers | heikaimu |
## Links
- npm: https://www.npmjs.com/package/vue-simple-picture-preview
- npm.io page: https://npm.io/package/vue-simple-picture-preview
## Dependencies (1)
- [vue](https://npm.io/package/vue.md) ^2.5.11
## Recent versions
- 1.3.8 (latest) — 2019-05-24
- 1.3.7 — 2019-04-22
- 1.3.6 — 2019-01-11
- 1.3.5 — 2019-01-07
- 1.3.4 — 2019-01-07
- 1.3.3 — 2019-01-07
- 1.3.2 — 2019-01-04
- 1.3.1 — 2019-01-04
- 1.3.0 — 2019-01-03
- 1.2.9 — 2019-01-03
- 1.2.8 — 2019-01-02
- 1.2.7 — 2019-01-02
- 1.2.6 — 2019-01-02
- 1.2.5 — 2019-01-02
- 1.2.4 — 2018-11-20
- … 24 more at https://npm.io/package/vue-simple-picture-preview/versions
## README
## vue 图片预览与编辑插件
#### 什么时候我可能会用到它，在后台管理中需要对图片进行编辑的时候你可以尝试使用它
[演示地址](https://heikaimu.github.io/picture-preview-example/dist/#/index/example)
### 安装
```
npm i vue-simple-picture-preview -S
```
### 使用
在需要使用的组件里面引入并注册：
```js
import Ppreview from "vue-simple-picture-preview";
components: {
Ppreview;
}
```
然后你就可以开始使用它了
```vue
```
### 参数
| Name | Type | Default | Description |
| ---------------- | ------- | ------- | ----------------------------------------------------------- |
| pictureList | Array | [] | 图片列表数组，支持多种数据格式，具体见下方数据格式 |
| defaultProps | Object | {} | 列表数据格式配置，配合 pictureList 使用，具体见下方数据格式 |
| containerWidth | Number | -1 | 外容器的宽度，如果不定义默认是 100%，不会超过屏幕 |
| width | Number | 100 | 列表图片的单个宽度 |
| height | Number | 100 | 列表图片的单个高度 |
| borderRadius | Number | 5 | 列表图片的圆角 |
| spaceBetween | Number | 5 | 列表图片之间的间隔 |
| menuType | String | all | 大图预览的时候的按钮样式，共三种选择 all/slide/bottom |
| mouseScrollable | Boolean | true | 是否支持鼠标缩放图片 |
| mouseScrollSpeed | Number | 0.05 | 缩放的速度，越大越快 |
| thumbnail | Boolean | true | 大图预览时候下方的缩略图是否显示 |
| thumbnailWidth | Number | 50 | 缩略图宽度 |
| thumbnailHeight | Number | 70 | 缩略图高度 |
| isEdit | Boolean | false | 是否开启编辑模式，编辑模式下可以拖动排序删除图片 |
| center | Boolean | false | 是否居中 |
### 列表数据格式
#### 完整的字符串地址数组集合
这种数据格式是最简单的无需任何配置直接使用即可
```js
pictureList: [
"https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/0B/00/ChMkJ1wcloSIUYAuAAO3jLTBc34AAt6LAPy1R4AA7ek000.jpg",
"https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/0B/00/ChMkJ1wcloSITAcKAAMLsFkEUtAAAt6LAPvhBMAAwvI448.jpg",
"https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/0B/00/ChMkJ1wcloOIVcm-AAVg9RKjYukAAt6LAPp_mAABWEN382.jpg",
"https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/0B/00/ChMkJ1wcloOIIm70AAJ-NdKlhGkAAt6LAPg52EAAn5N148.jpg"
];
```
```vue
```
#### 不完整的拼接地址类型
后台返回的地址只有后半部分，前面是公共仓库地址
```js
pictureList: [
"/t_s960x600c5/g5/M00/0B/00/ChMkJ1wcloSIUYAuAAO3jLTBc34AAt6LAPy1R4AA7ek000.jpg",
"/t_s960x600c5/g5/M00/0B/00/ChMkJ1wcloSITAcKAAMLsFkEUtAAAt6LAPvhBMAAwvI448.jpg",
"/t_s960x600c5/g5/M00/0B/00/ChMkJ1wcloOIVcm-AAVg9RKjYukAAt6LAPp_mAABWEN382.jpg",
"/t_s960x600c5/g5/M00/0B/00/ChMkJ1wcloOIIm70AAJ-NdKlhGkAAt6LAPg52EAAn5N148.jpg"
],
defaultProps: {
domain: "https://desk-fd.zol-img.com.cn"
}
```
```vue
```
#### 同时有原图和缩略图的集合
```js
pictureList: [
{
thumbnail: "/t_s144x90c5/g5/M00/0B/00/ChMkJ1wcloSIUYAuAAO3jLTBc34AAt6LAPy1R4AA7ek000.jpg",
original: "/t_s960x600c5/g5/M00/0B/00/ChMkJ1wcloSIUYAuAAO3jLTBc34AAt6LAPy1R4AA7ek000.jpg"
},
{
thumbnail: "/t_s144x90c5/g5/M00/0B/00/ChMkJ1wcloSITAcKAAMLsFkEUtAAAt6LAPvhBMAAwvI448.jpg",
original: "/t_s960x600c5/g5/M00/0B/00/ChMkJ1wcloSITAcKAAMLsFkEUtAAAt6LAPvhBMAAwvI448.jpg"
},
{
thumbnail: "/t_s144x90c5/g5/M00/0B/00/ChMkJ1wcloOIVcm-AAVg9RKjYukAAt6LAPp_mAABWEN382.jpg",
original: "/t_s960x600c5/g5/M00/0B/00/ChMkJ1wcloOIVcm-AAVg9RKjYukAAt6LAPp_mAABWEN382.jpg"
},
{
thumbnail: "/t_s144x90c5/g5/M00/0B/00/ChMkJ1wcloOIIm70AAJ-NdKlhGkAAt6LAPg52EAAn5N148.jpg",
original: "/t_s960x600c5/g5/M00/0B/00/ChMkJ1wcloOIIm70AAJ-NdKlhGkAAt6LAPg52EAAn5N148.jpg"
}
]
defaultProps: {
originalKey: "original",
thumbnailKey: "thumbnail",
domain: "https://desk-fd.zol-img.com.cn"
}
```
```vue
```
灵活的数据格式组合，能满足大多数接口数据类型。
### 事件
| Name | Description |
| ------------ | ---------------------------------------------------------- |
| @onDragstart | 排序拖拽开始时候触发 |
| @onDragend | 排序拖拽结束时候触发 |
| @updateList | 图片顺序发生变化以及删除时候都会触发，主要用来更新原始数据 |
#### 添加图片时候的注意事项
添加图片时候请使用如下方式来替代 push 方法，否则无法触发试图更新：
```
addNewOne() {
let num = Math.random() * this.pictureList.length - 1;
num = Math.round(num);
num = Math.max(num, 0);
num = Math.min(num, this.pictureList.length - 1);
this.pictureList = [...this.pictureList, this.pictureList[num]];
}
```
#### 整体更换数据列表时
```
this.pictureList = [
"https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/0B/00/ChMkJ1wcloOIIm70AAJ-NdKlhGkAAt6LAPg52EAAn5N148.jpg",
"https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/0B/00/ChMkJ1wcloSITAcKAAMLsFkEUtAAAt6LAPvhBMAAwvI448.jpg"
];
this.$refs.preview.refresh();
```
### 后续
之后会继续优化移动端上面的效果
---
_Source: https://npm.io/package/vue-simple-picture-preview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._