zoukankan      html  css  js  c++  java
  • vue实现图片点击放大

    用的vue-cli开发的项目,下面是具体实现代码

    子组件:

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

    父组件:

    <template>
        <div>
            <img :src="demo.png" @click="clickImg($event)">
            <!-- 放大图片 -->
            <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
        </div>
    </template>
    
    <script>
    import BigImg from '../global/BigImg.vue';
        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>

     效果图:

  • 相关阅读:
    jquery ajax 向后台传递数组
    定时任务
    C# 好用的插件
    C# 跳出循环
    存储区更新、插入或删除语句影响到了意外的行数(0)。实体在加载后可能被修改或删除。刷新 ObjectS
    Opencv2.4.9源码分析——HoughLinesP
    OpenCV+C++ 视频图片相互转换
    opencv2.2版本不稳定
    OpenCV 透视变换【图像归一化矫正】
    opencv配置注意事项【总结】
  • 原文地址:https://www.cnblogs.com/yesyes/p/6689082.html
Copyright © 2011-2022 走看看