Vue implémente la fonction de cliquer sur l'image pour l'agrandir (avec code)

Cette fois, je vais vous apporter la fonction de cliquer sur l'image pour l'agrandir dans Vue (avec code). Quelles sont les précautions pour implémenter la fonction de cliquer sur l'image dans Vue. un cas pratique, jetons un coup d'oeil.

1. Créez un sous-composant pour implémenter la fonction de méthode image : 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. Utilisez des sous-composants dans la classe parent :

<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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres éléments connexes. articles sur le site PHP chinois !

Lecture recommandée :

JS implémente la validation des données et la soumission de formulaires de cases à cocher

Comment implémenter des nombres et des nombres dans JS String conversion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!