vue点击后html放大,vue实现点击图片放大效果

本文实例为大家分享了vue点击图片放大展示的具体代码，供大家参考，具体内容如下

1.建立子组件,来实现图片方法功能: BigImg.vue

export default {

props: ['imgSrc'],//接受图片地址

methods: {

bigImg() {

// 发送事件

this.$emit('clickit')

}

/*动画*/

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

}

2.在父类中使用子组件:

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: {},

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

时间： 2017-08-12

vue点击后html放大,vue实现点击图片放大效果相关推荐

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点击后html放大,vue实现点击图片放大效果

vue点击后html放大,vue实现点击图片放大效果相关推荐

最新文章

热门文章