vue点击事件_vue实现点击图片放大效果

【www.bbyears.com--组件控件开发】

1.建立子组件,来实现图片方法功能: BigImg.vue

<script>
  export default {
    props: ["imgSrc"],//接受图片地址
    methods: {
      bigImg() {
      // 发送事件
        this.$emit("clickit")
      }
    }
  }
</script>

  /*动画*/
  .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;
  }

2.在父类中使用子组件:

  
    
      
        
      
      
      
        
        
   
        
        
      
    
  

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

本文来源：http://www.bbyears.com/asp/135105.html