vue 实现点击图片放大
作者QQ:1095737364 QQ群:123300273 欢迎加入!
1.建立子组件,来实现图片方法功能: 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: 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.在父类中使用子组件:
<template xmlns:v-on="http://www.w3.org/1999/xhtml">
<div class="contents">
<div class="group">
<div class="special"> <span v-text="pagedata.subtitle"></span> </div>
<span class="text-muted" v-text="pagedata.headline"></span>
<div class="group_img">
<!-- 放大图片 -->
<big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>
<div class="text" v-text="pagedata.article"></div>
<img id="smallImg" :src="pagedata.imgurl" @click="clickImg($event)">
</div>
</div>
</div>
</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>
更多专业前端知识,请上 【猿2048】www.mk2048.com
vue 实现点击图片放大相关推荐
- vue实现点击图片放大
1.在component新建一个文件,例如BigImg.vue,然后加入以下代码 <template><div v-show="visible" @click=& ...
- vue项目 一行js代码搞定点击图片放大缩小
一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...
- 点击图片放大至原始图片大小
有些时候为了排版的整洁,页面展示的图片不得不都是限定宽高的,如果想要点击图片放大至原始大小进行预览,再次点击回到原来样子,就要用到下面的代码了: var _w = parseInt($(window) ...
- 点击图片放大缩小功能
1.点击图片放大缩小的思路 图片部分: <table><div><img style="width:62px;height:83px;display:block ...
- jquery点击图片放大效果
点击图片放大效果无非就是创建一个大容器,点击小图片获取图片路径存放到大容器里. 接下来看一下效果图 HTML结构 <img class="enlargeImg" width= ...
- 百度移动优化:关于移动端点击图片放大有多少人注意?
百度移动搜索落地页体验白皮书4.0于2018年08月15日发布有多少人注意到白皮书最下面的这短短的60字? 好多网站都存在点击图片不可放大,有多少站长注意这个细节问题? 关于加这个功能确实挺麻烦,不懂 ...
- Android 点击图片放大至全屏 再次点击关闭过度动画 Shared Element效果(共享元素效果)
Android 点击图片放大至全屏 再次点击关闭过度动画 最近项目需要给用户一个体验优化,各种查阅,然后改了很多地方,类似于图片的点击预览,消息列表的点击流畅过渡. Shared Element效果( ...
- js实现点击图片放大效果,以及懒加载图片
js实现点击图片放大效果,以及懒加载图片 近期有个后端管理页面小优化,原来的图片是点击才会去后端请求图片展示到前端,用dialog的方式展示,但是不太直观 存在两个问题 1.点击查看后,电子照片会变形 ...
- jquery 点击图片放大,带上下一张,可通过滚动鼠标进行图片缩放
<?php /*** Created by PhpStorm.* User: 28010* Date: 2022/1/17* Time: 13:50*** 1.这里图片的数据是从数据库里面查询取 ...
- html手机端点击图片放大并根据手势缩放
手机端实现点击图片放大根据手势放大缩小 效果如下 进入页面 背景是白色的 点击图片后放大并居中背景变为黑色 效果如下 可以根据手势缩放 演示完毕,上代码 需要先引入一个js文件 网盘链接: https ...
最新文章
- Oracle 11g 数据类型
- 顺F速运,你被爱加M坑了
- top在html5里什么意思,html中的scrolltop是什么意思
- 安装docker-compose for linux
- unity 调用 .dll 或 .so时遇到的问题
- Hacker-基础学习(1)
- java序列化和反序列话总结
- c语言标准之c99下载,C语言标准中的C99与最新的C11
- 蓝牙的原理,蓝牙耳机怎么连接手机
- .rpt文件内容读取java_Java中读取File文件内容转为String类型
- 51单片机读取引脚值原理
- poi生成Workbook转成pdf(java实现excel转pdf)
- 多张图片怎么合成gif动图?电脑如何将静图转换动图?
- 【侯捷】C++STL标准库与泛型编程(第二讲)
- 为什么要研究引起潜在大流行病的病原体?
- Airtest IDE 连接 夜游神模拟器 自动化UI测试
- 基于单片机的模拟风扇控制系统
- 387:字符串中的第一个唯一字符
- Video.js中m3u8视频清晰度切换
- Win10:鼠标右键如何添加快捷关机、注销等功能
热门文章
- 墨刀和Axure RP:设计App原型图就是如此简单
- 网络舆情监测TOOM
- SRCNN论文翻译(Image Super-Resolution Using Deep Convolutional Networks)
- Java Web day14
- 红米开发版刷机教程_红米手机稳定版刷机教程(Recovery卡刷)的具体操作方法
- Java programer的成长之路
- Spring的事务传播机制详解
- matlab 对直方图均衡化,基于直方图均衡化的图像增强技术分析与Matlab实现_直方图均衡化matlab...
- Android WebView 示例
- QT界面主题风格设置