Vue implementiert die Funktion, auf das Bild zu klicken, um es zu vergrößern (mit Code)

Dieses Mal werde ich Ihnen die Funktion zum Klicken auf das Bild zum Vergrößern in Vue vorstellen (mit Code). Was sind die Vorsichtsmaßnahmen für die Implementierung der Funktion zum Klicken auf das Bild in Vue? Ein praktischer Fall, werfen wir einen Blick darauf.

1. Erstellen Sie eine Unterkomponente, um die Bildmethodenfunktion zu implementieren: 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. Verwenden Sie Unterkomponenten in der übergeordneten Klasse:

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Bereichen Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

JS implementiert Datenvalidierung und Übermittlung von Kontrollkästchenformularen

So implementieren Sie Zahlen und Zahlen in JS String Konvertierung

Das obige ist der detaillierte Inhalt vonVue implementiert die Funktion, auf das Bild zu klicken, um es zu vergrößern (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!