vue组件实现查看大图效果

使用的index.vue代码

<template><img :src="imgUrl" @click="clickImg($event)"><big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
</template>
import BigImg from '../../components/imgView.vue'
export default {components: {'big-img': BigImg},methods: {clickImg (e) {this.showImg = truethis.imgSrc = e.currentTarget.src},viewImg () {this.showImg = false}}
}

组件的代码：

<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: absolute;top: 0px;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: fixed;width: 26%;/*height: 80%;*/top: 50%;left: 50%;transform: translate(-50%,-50%);margin: auto;z-index: 1000;
}
</style>

转载于:https://www.cnblogs.com/qq364735538/p/7338858.html

vue组件实现查看大图效果相关推荐

在 vue 组件中查看 vuex 定义
原文:在 vue 组件中查看 vuex 定义在进行 vue 项目开发的时,如果项目中用到了 vuex 做状态管理,经常需要查看 store 里面定义的状态属性.但是在 vue 组件中引用这些 vue ...
【Android视图效果】共享元素实现仿微信查看大图效果
在之前的文章中,我们通过动画实现了这个,具体可以查看[Android 动画]动画详解之仿微信查看大图效果(四),这里,我们用过度动画来实现. 什么是共享元素? 它是Android 5.0新加入的一种过 ...
JQuery实现点击缩略图查看大图效果
点击缩略图查看大图效果,这里存在一个如何获取图片真实大小的问题.在手机端页面,插入的图片大小都是按照图片的原始尺寸在展示的,如果图片太大完全超出手机的屏幕尺寸 ,我们的bootstrap响应式针对图片 ...
Vue组件——数字滚动抽奖效果
闲话不多说(希望对大家有帮助),那就直接上代码吧可调整数字滚动速度,可指定开奖延迟时间,可指定开奖数字,按个人需求自行改动(录了个效果供参考,临时找的录屏,表介意) 不一一精简了组件代码 < ...
vue swiper中点击预览图片全屏预览图片 vue点击查看大图
希望实现的效果,见下图使用到的插件使用到的插件 vue-photo-preview 第一步:安装插件 npm install vue-photo-preview --save 第二步:引用 imp ...
vue中进度条写法_vue组件实现进度条效果
这篇文章主要为大家详细介绍了vue组件实现进度条效果,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 本文实例为大家分享了vue实现进度条效果的具 ...
vue 组件数据共享_Vue共享组件
vue 组件数据共享 As a company, we sell experiences on many different sales channels, gotui.com, musement.c ...
vue+echarts实现摩天轮大图效果
vue+echarts实现摩天轮大图效果.主要是包含echarts的散点图及迁徙图共同组成 1.在项目main.js中引入echarts 整个大图的绘制需要用到地图,所以还需要引入一个地图相关的依赖, ...
Vue组件中使用canvas实现蜂巢效果的一些尝试
Vue组件中使用canvas实现蜂巢效果的一些尝试前段时间,看到D3.js的官方网站的蜂巢效果,感觉不错,不过一直没有时间去实际的实现下,借这次机会,算是填了前面的坑~~,先来看看d3.js的效 ...

vue组件实现查看大图效果

vue组件实现查看大图效果相关推荐

最新文章

热门文章