vue+element实现图片查看器(v-viewer)

Posted 2021-12-04 水星记_

需求：

让图片轮播的同时实现当用户点击图片，弹出图片的大图预览。

大概也就是这样:

1.首先安装插件依赖

cnpm i v-viewer --save

2.在main中引入相关配置

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer, {
    defaultOptions: {
        zIndex: 9999
    }
})

3.在相关组件中使用
小案例：

<template>
  <div>
    <div class="block">
      <el-carousel height="300px">
        <el-carousel-item v-for="(item,index) in imgURl" :key="index">
          <!-- //给需要预览放大的图片外层加上 v-viewer 属性即可 -->
          <span v-viewer>
            <img :src="item" alt="">
          </span>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        imgURl: [
          "https://img1.baidu.com/it/u=3246628741,3439955235&fm=26&fmt=auto",
          "https://ns-strategy.cdn.bcebos.com/ns-strategy/upload/fc_big_pic/part-00481-3683.jpg"
        ]
      }
    },
  }
</script>

<style scoped>
  .block {
    width: 50%;
  }

  img {
    width: 100%;
    height: 100%;
  }
</style>