vue图片查看器 基于viewer

vue2-viewer

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

vue2-viewer 是viewer.js vue的实现，效果以及样式完全移植自viewer.js

第一步：npm install --save vue2-viewer

第二步： 

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

1 2	import ImageViewer from 'vue2-viewer'; Vue.use(ImageViewer);

第三步：

使用组件

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

单图片模式

props

参数	说明	类型	必须
thumb	要显示的小图的链接	string	true
full	点击放大后的大图链接	string	true

示例：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<vue-viewer style="display: inline-block"  :thumb="image"  :full="image"> </vue-viewer> <script> export default {  name: 'app',  data () {  return {   msg: 'vue2-viewer-test',   image: '图片路径',  }  } } </script>

多图片模式

props

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

Scoped Slot

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

示例：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

<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: [   'img1src',   'img2src',   'img3src'   ]  }  },  methods: {  onRemove(index) {   console.log(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://www.jb51.net/article/159638.htm