vue基于viewer实现的图片查看器功能

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

<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"text-align: center"> 

多图片模式
props


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


Scoped Slot


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


示例：


<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"text-align: center">


总结
以上所述是小编给大家介绍的vue基于viewer实现的图片查看器功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！