Home  >  Article  >  Web Front-end  >  Vue implements the function of clicking on the picture to enlarge it (with code)

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

php中世界最好的语言
php中世界最好的语言Original
2018-04-19 09:40:077446browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn