Vue查看图片组使用duo-image-viewer

1、安装v-viewer依赖

npm i duo-image-viewer --save

2、在main.js全局引入

import duoImageViewer from 'duo-image-viewer' // 引入组件

Vue.use(duoImageViewer) // 注册组件

3、增加组件

在组件目录模块components创建目录ShowMoreImgs，在ShowMoreImgs目录下创建index.vue组件，组件内容如下：

<template>
  <div>
    <duo-image-viewer
      :src="srcList[0]"
      :srcList="srcList"
      @close="handleClose"
      :showViewer="showViewer"
    />
  </div>
</template>

<script>
export default {
  name: "ShowMoreImgs",
  data() {
  	return{
  	
  	}
  },
  props: {
    srcList: {
      type: Array,
      default:function(){
        return [];
      }
    },
    showViewer:{
      type: Boolean,
      default:function(){
        return false;
      }
    }
  },
  methods: {
    handleOpen() {
      this.showViewer = !this.showViewer
    },
    handleClose() {
      this.showViewer = false
    }
  },
}
</script>

<style scoped>

</style>

其中showViewer控制显示隐藏，srcList[0]表示当前展示的图片，srcList表示要展示图片列表

4、页面引用组件

此处的dataImages是要传输到组件的图片地址，多张图片之间用英文逗号,隔开，类似：1.jpg,2.jpg,3.jpg
所以图片名称不能包含逗号,如：1122,_11.jpg

<template>
  <div class="app-container">
    <el-button
            size="mini"
            type="text"
            icon="el-icon-picture"  
            @click="showDetailUrl(dataImages)"
          >点击查看
    </el-button>

   <!-- 查看图片 -->
    <show-more-imgs :src-list="imgUrlList" :show-viewer="imgListOpen"></show-more-imgs>

   
  </div>
</template>

<script>

import ShowMoreImgs from "@/components/ShowMoreImgs";//这是你组件路径

export default {
  name: "index",
  components: {
    ShowMoreImgs,
  },
  data() {
    return {
      imgListOpen: false,
      imgUrlList: [],
      
    };
  },
  
  methods: {
    //查看详情图
    showDetailUrl(imgUrl){
     if (imgUrl){
        this.imgListOpen= true;
        this.imgUrlList= imgUrl.split(",")
      }
    },

   
};
</script>