cank : vue |实现点击图片预览浏览器满屏大图_橘子972的博客-CSDN博客_vue 图片点击全屏

1.安装插件

cnpm install vue-directive-image-previewer -D

2.[src/main.js]引入插件

import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(VueDirectiveImagePreviewer, {//1. wrapper背景颜色———— 你也可以写成background: '#000'  //支持rgba、rgb和image: 'url(xxx)'background: {color: '#000'},//2. 转换动画animate: {duration: 600,delay: 500},//3. 鼠标样式(css)cursor: 'pointer',copy:true,zIndex:9999,maxWidth:"100%",maxHeight:"100%"
})

3. 使用

<img v-image-preview :src="temp.imgSrc"  style="height: 50px;"/>

VUE(11) : 图片点击全屏展示相关推荐

微信html 全屏显示,关于微信上网页图片点击全屏放大效果
实现微信上网页的图片点击后全屏还可以可以缩放,这个功能是别人做的,可是捏点击后屏幕直接黑屏了,图片没有显示出来.这个代码在网上搜一下,挺多类似的. 先上代码. 调用微信图片浏览器的函数 functio ...
android 点击图片动画效果,Android仿微信图片点击全屏效果
废话不多说,先看下Android图片点击全屏效果: 先是微信的再是模仿的先说下实现原理,再一步步分析这里总共有2个Activity一个就是主页,一个就是显示我们图片效果的页面,参数通过Inten ...
h5点击图片自动放大_关于微信上网页图片点击全屏放大效果
实现微信上网页的图片点击后全屏还可以可以缩放,这个功能是别人做的,可是捏点击后屏幕直接黑屏了,图片没有显示出来.这个代码在网上搜一下,挺多类似的. 先上代码. function arrayToJson ...
android图片点击全屏显示,Android浏览图片，点击放大至全屏效果
近期做一个项目类似于QQ空间,做到照片浏览的功能,对于QQ空间中点击图片放大至全屏,感觉效果非常赞,于是也做了个类似的效果. 例如以下. 我不知道QQ那个是怎么做的.我的思路例如以下: 首先.从图片缩 ...
模仿微信图片点击全屏效果
转载请注明出处:王亟亟的大牛之路昨天想着模仿写些什么,然后觉得什么仿京东啊,仿美团之类的外面都有,正好又找到点资源就写了这篇"高仿微信图片放大" 废话不多说,先看下效果: 先是微 ...
Android 点击图片放大至全屏再次点击关闭过度动画 Shared Element效果（共享元素效果）
Android 点击图片放大至全屏再次点击关闭过度动画最近项目需要给用户一个体验优化,各种查阅,然后改了很多地方,类似于图片的点击预览,消息列表的点击流畅过渡. Shared Element效果( ...
移动端echarts点击全屏按钮横屏全屏展示
在遮罩层显示全屏图表 <div class="fullScreen"><van-overlay lock-scroll :show="isFull&qu ...
html手机端自动全屏,HTML5在手机端实现视频全屏展示方法
最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能.测试了很久,终于找到解决办法. 第一种:将视频放大来控制. 视频在播放的时候,全屏是根据高度来的,如果设置视频 video 标签的宽度是 1 ...
基于vue大数据可视化（大屏展示）案例
项目地址: vue-big-screen 点击这里一.项目描述 1,一个基于 vue.datav.Echart 框架的 " 数据大屏项目 ",通过 vue 组件实现数据动态刷新 ...

VUE(11) : 图片点击全屏展示

1.安装插件

2.[src/main.js]引入插件

3. 使用

VUE(11) : 图片点击全屏展示相关推荐

最新文章

热门文章