Vue<图片查看组件>

效果图：

image.png

父组件使用：

html：

            <div class="img_msg_box">
              <div class="msg" v-for="(i,index) in imgList" :key="index">
                <img
                  @click="openImgView(imgList,index)"
                  :src="i.img"
                  alt
                />
                <div class="cover">查看大图</div>
              </div>
            </div>

      <ImgView
      :dialog.sync="imgView_msg.show"
      :imgList="imgView_msg.list"
      :imgIndex="imgView_msg.index"></ImgView>

data数据：

      imgList:[],
      imgView_msg: {
        show: false, //是否打开图片查看
        index: 0, //图片查看下标
        list: [] //图片列表
      },

methods方法：

    // 图片查看方法
    openImgView(list, index) {
      this.imgView_msg.list = list;
      this.imgView_msg.index = index;
      this.imgView_msg.show = true;
    },

子组件代码：

<template>
  <!-- 图片查看组件 -->
  <div id="img_view" v-if="dialogVisible">
    <div class="cover" @click="dialogVisible = false"></div>
    <div class="change_button">
      <div class="content">
        <i class="el-icon-close" @click="dialogVisible = false"></i>
        <template v-if="imgList.length>1">
          <i class="el-icon-arrow-left" @click="changeImg('back')"></i>
          <i class="el-icon-arrow-right" @click="changeImg('next')"></i>
        </template>
      </div>
    </div>
    <div class="img_view">
      <img :src="$global.fileURL + img_show" alt />
      <p class="hint">图{{img_index + 1}}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    imgList: Array, //父元素传过来的图片列表
    imgIndex: { type: Number, default: 0 }, //父元素打开的图片下标
    dialog: { type: Boolean, default: false } //显示状态
  },
  watch: {
    //监听图片查看打开时图片默认显示为选中的图片
    dialogVisible(val) {
      if (val) {
        this.img_index = this.imgIndex;
        this.img_show = this.imgList[this.imgIndex];
      }
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.dialog;
      },
      set(val) {
        this.$emit("update:dialog", val);
      }
    }
  },
  data() {
    return {
      img_index: null, //显示的图片下标
      img_show: null //正在展示的图片信息
    };
  },
  methods: {
    //图片切换
    changeImg(type) {
      //根据图片列表获取最大值
      let max = this.imgList.length - 1;
      //下一张
      if (type == "next") {
        this.img_index++;
        if (this.img_index > max) {
          this.img_index = 0;
        }
      }
      //上一张
      if (type == "back") {
        this.img_index--;
        if (this.img_index < 0) {
          this.img_index = max;
        }
      }
      this.img_show = this.imgList[this.img_index];
    }
  }
};
</script>

<style lang="scss" scoped>
.change_button {
  width: 100%;
  z-index: 99;
  position: fixed;
  top: 12%;
  text-align: center;
  .content {
    background: rgba(0, 0, 0, 0.253);
    display: inline-block;
    padding: 5px;
    text-align: center;
    i {
      opacity: 0.8;
      cursor: pointer;
      color: white;
      font-size: 27px;
      font-weight: bold;
      margin: 0 20px;
      transition: transform 0.3s;
      &:hover {
        opacity: 1;
        text-shadow: 0 0 3px white;
      }
      &:active {
        opacity: 1;
        transform: scale(0.9);
      }
    }
  }
}
#img_view {
  z-index: 9999;
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .cover {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: black;
    opacity: 0.7;
    z-index: -1;
  }
  .img_view {
    position: relative;
    padding: 10px;
    img {
      height: 100%;
      min-height: 350px;
    }
    .hint {
      position: absolute;
      bottom: -40px;
      width: 100%;
      font-size: 13px;
      color: white;
      text-align: center;
    }
  }
}
</style>