vue点击预览图片插件（可放大缩小翻转等）

开发工具webstorm
首先npm安装插件：npm install viewerjs
然后再main.js中引用

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
/* eslint-disable */
Vue.use(Viewer)
Viewer.setDefaults({Options: { "inline": true, "button":true, "navbar": true, "tittle": true, "toolbar":true, "tooltip": true, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true, "url": "data-source" }
})

然后在需要图片预览的地方添加viewer标签

 <el-table-column prop="img" label="图片" header-align="center" align="center"><template slot-scope="scope"><viewer :images="imgArr"><img style="width: 60px;height: auto" :src="scope.row.img" alt=""></viewer></template></el-table-column>

如果是单图片的话：images属性可以去除

vue点击预览图片插件（可放大缩小翻转等）相关推荐

js产品360度旋转预览图片插件
下载地址纯js实现的产品360度旋转预览图片插件.该js特效仅使用120行代码,即可实现通过滑块.或鼠标手动360度旋转图片,以及自动360度旋转图片的效果. dd:
vue swiper中点击预览图片全屏预览图片 vue点击查看大图
希望实现的效果,见下图使用到的插件使用到的插件 vue-photo-preview 第一步:安装插件 npm install vue-photo-preview --save 第二步:引用 imp ...
ant-design-vue3.2.6 图片预览，旋转，放大缩小
这个虽然用弹窗写的但是是在页面上的图片预览所以对弹窗样式进行了修改 <div ref="aa" style="width:75%;"><a ...
viewer动态加载图片第一次点击预览图片失败的问题
如果您搜到这篇文章的话,那估计您遇到跟我一样的问题了. 众所周知,每一个插件都有很多坑,比如说市面上比较火爆的图片浏览插件viewer,有js版本和jqery版本的,尽管这两个版本不一样,但是大同小 ...
vscode 预览图片插件_真的动手写的VSCode的插件(图片浏览)之1
由于本职工作中经常做图像处理,于时大量的图片浏览是不可避免的. 怎么样不离开最近经常使用的VSCode,同时去看大量的图像对我来讲就是个不错的需求,尤其是某个目录下的文件. 先谈基本的需求吧,显示一个 ...
纯js实现点击预览图片效果
效果如图所示具体实现如下 //点击放大 function clickImg(){var lis=document.getElementById('imgList').getElementsByTag ...
预览图片插件viewer的使用
1.安装 npm install v-viewer 2 引入(main.js文件中) import Vue from 'vue'; import Viewer from 'v-viewer' impo ...
html photoswipe原理,H5使用PhotoSwipe预览图片
如果在h5上想要实现类似app上的点击预览图片并且可以放大缩小这种功能,确实比在app上实现起来更为麻烦,但是有了PhotoSwipe(https://github.com/dimsemenov/Ph ...
移动端查看预览图片放大缩小
方法一之前介绍过一款移动端vue适用的插件大全 https://blog.csdn.net/MtangEr/article/details/85339092 里边有一篇是查看图片放大缩小的 htt ...

vue点击预览图片插件（可放大缩小翻转等）

vue点击预览图片插件（可放大缩小翻转等）相关推荐

最新文章

热门文章