Vue implements the function of clicking on the picture to enlarge it (with code)

This time I will bring you the function of clicking on the image to enlarge in vue (with code). What are the precautions for vue to implement the function of clicking on the image to enlarge. The following is a practical case, let's take a look.

1. Create a subcomponent to implement the image method function: BigImg.vue

<template>
  <!-- 过渡动画 -->
  <transitionname="fade">
     <pclass="img-view"@click="bigImg">
      <!-- 遮罩层 -->
       <pclass="img-layer"></p>
       <pclass="img">
         <img:src="imgSrc">
       </p>
    </p>
  </transition>
</template>
<script>
  export default {
    props: ['imgSrc'],//接受图片地址
    methods: {
      bigImg() {
      // 发送事件
        this.$emit('clickit')
      }
    }
  }
</script>
<stylescoped>
  /*动画*/
  .fade-enter-active,
  .fade-leave-active {
    transition: all .2s linear;
    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: 0;
    right: 0;
    margin: auto;
    z-index: 1000;
  }
</style>

2. Use subcomponents in the parent class:

<templatexmlns:v-on="http://www.w3.org/1999/xhtml">
  <pclass="contents">
    <pclass="group">
      <pclass="special">
        <spanv-text="pagedata.subtitle"></span>
      </p>
      <spanclass="text-muted"v-text="pagedata.headline"></span>
      <pclass="group_img">
        <!-- 放大图片 -->
        <big-imgv-if="showImg"@clickit="viewImg":imgSrc="imgSrc"></big-img>
   
        <pclass="text"v-text="pagedata.article"></p>
        <imgid="smallImg":src="pagedata.imgurl"@click="clickImg($event)">
      </p>
    </p>
  </p>
</template>
  
<script>
import BigImg from '../../index/moduleStyles/BigImg.vue';
export default {
  data () {
    return {
      showImg:false,
      imgSrc: ''
    }
  },
  props: ['pagedata'],
  computed: {},
  components: { 'big-img':BigImg},
  methods: {
    clickImg(e) {
      this.showImg = true;
      // 获取当前图片地址
      this.imgSrc = e.currentTarget.src;
    },
    viewImg(){
      this.showImg = false;
    },
  },
  watch: {},
}
</script>
<style>
</style>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

JS implements data validation and checkbox form submission

How to implement numbers and numbers in JS String conversion

The above is the detailed content of Vue implements the function of clicking on the picture to enlarge it (with code). For more information, please follow other related articles on the PHP Chinese website!