vue实现点击图片放大显示功能

此文章转载于福建开源社区http://www.fjkysq.com/blog/130.html

在使用VUE开发时，可能会遇到这么一个需求，第一个界面会出现小图片，用户可以点击小图片进入查看放大的图片。这种需求最容易出现在公众号上，毕竟手机屏幕太小，在展现文字及图片时，图片显示的空间就有限了，这个时候如果你可以点击这个图片，图片能放大到全屏，是否就可以满足这个需求了呢？那以下就是使用VUE完成这个功能，以下代码可做参考

父组件：

<template><div >
//imgBaseUrl为图片URL
<img v-if="imgBaseUrl" style="width:100%" :src="imgBaseUrl"  @click.self="showBigImage(imgBaseUrl)">
//显示放大图片的组件
<ShowPhoto :visible="photoVisible" :url="bigImgUrl" @closeClick="()=>{photoVisible=false}"></ShowPhoto></div>
</template>export default {data() {return {photoVisible: false}},methods: {showBigImage(imgUrl) {//点击图片函数，点击后，把photoVisible设置成trueif (imgUrl != "") {this.photoVisible = true;this.cacheInfo()}}}

子组件

<template><div v-show="visible" @click="closeClick" class="showPhoto"><img class="img" :src="url" alt="图片加载失败"></div>
</template><script>
import {MessageBox} from 'mint-ui'
export default {props:{url: {type: String,default: ''},visible : {type: Boolean,default: false},},methods:{closeClick(){//子组件可以使用 $emit 触发父组件的自定义事件this.$emit('closeClick')}}}
</script>
<style lang="stylus" scoped>
.showPhotoposition:fixedtop:0left:0width: 100%height: 100%background: rgba(0,0,0,0.5)z-index: 999display: flex.imgdisplay: blockmargin: auto 0width 100%text-align: center;
</style>

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

vue实现点击图片放大显示功能

vue实现点击图片放大显示功能相关推荐

最新文章

热门文章