vue项目点击图片放大功能实现

点击图片放大

首先,新建一个组件,我们命名为ImageBig.vue

//ImageBig.vue
<template>
  <div class="Big_image">
    <!-- 过渡动画 -->
    <transition name="fade">
      <div class="img-view" @click="bigImg">
        <!-- 遮罩层 -->
        <div class="img-layer"></div>
        <div class="img">
          <img :style="{width:imgWidth,height:imgHeight}" :src="imgSrc">
        </div>
      </div>
    </transition>
  </div>
</template>
​
<script>
export default {
  props: {
    imgSrc: {
      type: String,
      default: '',
      required: true,
    },
    imgWidth: {
      type: String,
      default: '',
    },
    imgHeight: {
      type: String,
      default: '',
    },
  },
  methods: {
    data() {
      return {};
    },
    bigImg() {
      // 发送事件
      this.$emit('clickit');
    },
  },
};
</script>
<style lang="scss" scoped>
.Big_image {
  .fade-enter-active,
  .fade-leave-active {
    transition: all 1s;
    transform: translate3d(0, 0, 0);
  }
  .fade-enter,
  .fade-leave-active {
    transform: translate3d(100%, 0, 0);
  }
  /* bigimg */
  .img-view {
    position: inherit;
    width: 100%;
    height: 100%;
  }
  .img-view .img-layer {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .img-view .img {
    img {
      max-width: 100%;
      display: block;
      position: absolute;
      left: 50%;
      right: 50%;
      // margin: auto ;
      z-index: 1000;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
​

使用

<template>
  <div>
    <ImageBig
      v-if="showImg"
      @clickit="viewImg"
      :imgSrc="imgSrc"
      class="img-big"
    ></ImageBig>
    <div class="container">
    <div class="img-box" @click="bigScale">
        <!-- 页面上的小图以及右下角的放大的icon -->
        <img class="head-img" src="~assets/test.png" alt="" />
        <img src="~assets/big-icon.png" alt="" class="tools" />
      </div>
      ...
    </div>
  </div>
</template>

<script>
// 引入组件地址,我们这里放在widgets目录下,看个人放置的目录,进行引入.
import ImageBig from 'widgets/ImageBig';

// 引入一测试张图片
import testImg from 'assets/test.png';

export default {
  components: {
    ImageBig,
  },
  data() {
    return {
      showImg: false,
      imgSrc: '',
      testImg,
    };
  },
  methods: {
    viewImg() {
      this.showImg = false;
    },
    bigScale() {
      this.imgSrc = this.testImg;
      this.showImg = true;
    },
   ...
  },
};
</script>

<style lang="scss" scoped>
...
</style>