vue点击图片实现大图预览

npm安装viewer组件

npm i v-viewer

在main.js中引入

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({  //默认样式，可以按需求更改（默认可不写）Options: { 'inline': true, // 启用 inline 模式'button': true, // 显示右上角关闭按钮'navbar': true, // 显示缩略图导航'title': true, // 显示当前图片的标题'toolbar': true, // 显示工具栏'tooltip': true, // 显示缩放百分比'movable': true, // 图片是否可移动'zoomable': true, // 图片是否可缩放'rotatable': true, // 图片是否可旋转'scalable': true, // 图片是否可翻转'transition': true, // 使用 CSS3 过度'fullscreen': true, // 播放时是否全屏'keyboard': true, // 是否支持键盘'url': 'data-source' // 设置大图片的 url}
})

代码

<div class="func-right flex"><viewer><img :src="getImg" alt=""></viewer>
</div>
//动态获取图片
getImg(){return new URL('../../assets/images/qq-fance.jpg', import.meta.url).href
}

vue点击图片实现大图预览相关推荐

点击图片实现大图预览
实现点击图片预览这次主要是在table表格里能够实现,点击里面的图片实现大图预览的效果,直接找的现成的轮子,用在项目里.这里主要是讲讲用viewer组件实现点击图片预览,用的组件,只需在本地安装或者 ...
android从九宫格全屏预览,仿微信朋友圈展示图片的九宫格图片展示控件，支持点击图片全屏预览大图...
AssNineGridView 仿微信朋友圈展示图片的九宫格图片展示控件,支持点击图片全屏预览大图(可自定义). 写在前面这是一个九宫格控件,本来是很久之前就写好了,现在才开源出来,也是看了很多优秀 ...
手机端点击图片全屏预览
<!doctype html> 手机端点击图片全屏预览 <div class="category"><img src="1.jpg" ...
小红书多图剪裁+微信图片选择器+大图预览+图片剪裁等等相册
最近发现一个挺不错的开源库,推荐给大家. 简介:小红书多图剪裁+微信图片选择器+大图预览+图片剪裁(支持圆形剪裁和镂空剪裁),已适配androidQ,借鉴并升级matisse加载内核!超强定制性可轻松 ...
elementUi——点击图片时，预览所有大图——功能实现(两种方案)
今天在做后台管理系统时,遇到一个需求,在表格中有个img的字段,可能有多张图片,在表格中只展示一张,当点击此图片时,展示所有图片的预览大图效果. 遇到这种问题,我的第一反应就是使用走马灯效果: 1.走 ...
vue+elementUI 实现图片上传预览功能
准备工作:你需要一个后台接口,你传文件给他,他返回一个图片在线链接.ok,开干! 用到的是elmentUI里的el-upload,先去看官网例子.我用到的是图片列表先把html的框架copy过来,然 ...
Css+Jquery实现点击图片放大缩小预览图片预览查看大图
要求点击一张图片,图片就会放大,查看大图,点击空白处就会隐藏大图,回到缩略图. 技术要点主要是Jquery进行元素的显示与隐藏. 代码 <!DOCTYPE html> <html ...
vue点击图片查看大图使用插件 vue-photo-preview
1.引入插件 npm install vue-photo-preview --save 2.main.js import preview from 'vue-photo-preview'import ...
总结在使用vue-photo-preview---图片查看大图插件，点击图片无法显示预览等问题
说明前先抛一下官网地址:http://npm.taobao.org/package/vue-photo-preview 1.使用安装 npm install vue-photo-preview --s ...

vue点击图片实现大图预览

vue点击图片实现大图预览相关推荐

最新文章

热门文章