Vue는 사진을 클릭하여 확대하는 기능을 구현합니다(코드 포함).

이번에는 Vue에서 이미지 확대 기능을 구현하는 방법(코드 포함)을 가져오겠습니다. Vue에서 이미지 확대 기능을 구현하기 위해 사용할 주의 사항은 다음과 같습니다. 사례를 살펴보겠습니다.

1. 이미지 메서드 기능을 구현하기 위한 하위 구성 요소를 만듭니다: 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. 상위 클래스에서 하위 구성 요소 사용:

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS는 데이터 유효성 검사 및 체크박스 양식 제출을 구현합니다.

JS에서 숫자와 문자열을 변환하는 방법

위 내용은 Vue는 사진을 클릭하여 확대하는 기능을 구현합니다(코드 포함).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!