zoukankan      html  css  js  c++  java
  • vue点击单个图片放大

    子组件   BigImg.vue   实现放大图片

    <template>
    <!-- 过渡动画 -->
    <transition name="fade">
    <div class="img-view" @click="bigImg">
    <!-- 遮罩层 -->
    <div class="img-layer"></div>
    <div class="img">
    <img :src="imgSrc">
    </div>
    </div>
    </transition>
    </template>
    <script>
    export default {
    props: ['imgSrc'],
    methods: {
    bigImg() {
    // 发送事件
    this.$emit('clickit')
    }
    }
    }
    </script>
    <style scoped>
    /*动画*/
    .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: relative;
    100%;
    height: 100%;
    }

    /*遮罩层样式*/
    .img-view .img-layer {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    100%;
    height: 100%;
    overflow: hidden;
    }

    /*不限制图片大小,实现居中*/
    .img-view .img img {
    max- 100%;
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1000;
    }
    </style>

    父组件   传递图片地址给子组件

    <template>
    <div>
    <div class="img-show-mask">
    <img src='https://wpimg.wallstcn.com/e7d23d71-cf19-4b90-a1cc-f56af8c0903d.png' @click="clickImg($event)">

    </div>

    <!-- 放大图片 -->
    <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
    </div>
    </template>

    <script>
    import BigImg from '@/global/BigImg'
    export default {
    data() {
    return {
    showImg: false,
    imgSrc: ''
    }
    },
    components: {
    'big-img': BigImg
    },
    methods: {
    clickImg(e) {
    this.showImg = true
    // 获取当前图片地址
    this.imgSrc = e.currentTarget.src
    },
    viewImg() {
    this.showImg = false
    }
    }
    }
    </script>
    <style>

    .img-show-mask {
    100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 500%;
    }
    </style>
  • 相关阅读:
    剑指offer 整数中1出现的次数(从1到n整数中1出现的次数)
    剑指offer 把数组排成最小的数
    剑指offer 丑数
    剑指offer 字符串的排列
    剑指offer 数组中出现次数超过一半的数字
    剑指offer 最小的K个数
    操作系统 页面置换算法(C++实现)
    剑指offer 二叉搜索树与双向链表
    剑指offer 复杂链表的复制
    操作系统 银行家算法(C++实现)
  • 原文地址:https://www.cnblogs.com/minxiaofei/p/9243828.html
Copyright © 2011-2022 走看看