vue 图片预览与编辑插件

什么时候我可能会用到它，在后台管理中需要对图片进行编辑的时候你可以尝试使用它

演示地址

安装

npm i vue-simple-picture-preview -S

使用

在需要使用的组件里面引入并注册：

import Ppreview from "vue-simple-picture-preview";
components: {
  Ppreview;
}

然后你就可以开始使用它了

<Ppreview
  :pictureList="pictureList"
  :containerWidth="800"
  :width="100"
  :height="100"
  :borderRadius="5"
  :spaceBetween="5"
  menuType="all"
  :mouseScrollable="true"
  :mouseScrollSpeed="0.1"
  :thumbnail="true"
  :thumbnailWidth="50"
  :thumbnailHeight="70"
  :isEdit="true"
  :center="center"
  @onDragstart="onDragstart"
  @onDragend="onDragend"
  @updateList="updateList"
>
</Ppreview>

参数

| 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 | 是否居中 |

列表数据格式

完整的字符串地址数组集合

这种数据格式是最简单的无需任何配置直接使用即可

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"
];

<Ppreview :pictureList="pictureList">
</Ppreview>

不完整的拼接地址类型

后台返回的地址只有后半部分，前面是公共仓库地址

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"
}

<Ppreview :pictureList="pictureList" :defaultProps="defaultProps">
</Ppreview>

同时有原图和缩略图的集合

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"
}

<Ppreview :pictureList="pictureList" :defaultProps="defaultProps">
</Ppreview>

灵活的数据格式组合，能满足大多数接口数据类型。

事件

| 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]];
}

整体更换数据列表时

<Ppreview ref="preview"/>
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();

后续

之后会继续优化移动端上面的效果