Vue+element-ui轮播图+放大预览

Vue+element-ui轮播图+放大预览

最开始是采用Vue+element-ui轮播图+v-viewer实现的,npm引入v-viewer，不过里面的图片必须是原生的<img(后面<>都只打一半，不然显示有点问题)，用<el-image有点瑕疵，后来又发现element-ui有带el-image-viewer的一个放大方法。想着都引入了element，没必要在引入一个v-viewer。虽然<el-image有带一个previewSrcList方法，但是不能调整zindex层级等参数,会显示到我的对话框下层。

看了很多文章，虽然是全局引入element-ui发现还是不能直接用,<el-image可以直接用，<el-image-viewer有,但是直接用会报，您是否正确注册了组件?对于递归组件,请确保提供“name”选项的错误。所以简单粗暴一点，我们重新对单独引入注册一下就可了。

下面是<el-image-viewer跟进去看到的方法

export default {
  name: 'elImageViewer',

  props: {
    urlList: {
      type: Array,
      default: () => []
    },
    zIndex: {
      type: Number,
      default: 2000
    },
    onSwitch: {
      type: Function,
      default: () => {}
    },
    onClose: {
      type: Function,
      default: () => {}
    },
    initialIndex: {
      type: Number,
      default: 0
    },
    appendToBody: {
      type: Boolean,
      default: true
    },
    maskClosable: {
      type: Boolean,
      default: true
    }
  },

找到前面的路径，先引入
在我的一个Matching.vue文件中引入,只贴了用到的,名字都起一样的elImageViewer,懒得改

import elImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
  name: 'Matching',
  components: {
    elImageViewer
  },
   data() {
   return {
    towerPhoto: [
        require('@/assets/towerPhotos/Tower1.jpg'),
        require('@/assets/towerPhotos/Tower2.jpg'),
        require('@/assets/towerPhotos/Tower3.jpg'),
        require('@/assets/towerPhotos/Tower4.jpg'),
      ],
    viewerImgList: [],
   }
  }
 }

我的HTML页面，循环轮播图的el-carousel-item，用于展示有几个轮播图，里面加入展示图片的<el-image和放大用的<elImageViewer，z-index可以不用，我这里是因为我的其他组件都是2000，这个必须在上面，要大于2000，<elImageViewer要放到。<el-carousel-item循环的外面，不然预览时，点击下一个，上一个图片会沦为背景。

 <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="(item,index) in towerPhoto" :name=item>
              <el-image :src=item @click="onPreview(index)">
              </el-image>
            </el-carousel-item>
             <elImageViewer
                  v-if="showViewer"
                  :on-close="closeViewer"
                  :url-list=viewerImgList
                  :z-index=3000>
              </elImageViewer>
          </el-carousel>

传入index用于判断从哪一张图片打开放大预览。

methods: {
    //打开查看器
    onPreview(index) {
      this.showViewer = true
      let tempImgList = [...this.towerPhoto];
      let temp = [];
      for (let i = 0; i < index; i++) {
        temp.push(tempImgList.shift());
      }
      this.viewerImgList = tempImgList.concat(temp);
    },
    // 关闭查看器
    closeViewer() {
      this.showViewer = false
    },
  }

最后实现效果

完结。