安装

npm install viewerjs

引入

import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'

html

<img :src="url" @load="loadImg" :id="img"/>

js

loadImg () {this.$nextTick(() => {const ViewerDom = document.getElementById('img')const viewer = new Viewer(ViewerDom, {url: 'src',show: function () {viewer.update()}})})
}

vue使用Viewer.js相关推荐

Vue实现图片预览（Viewer.js）
Viewer.js viewer.js是一款开源的图片预览插件,功能十分强大: 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转) 支持水平/垂直翻转支持图片移动支持 ...
viewer.js图片查看器
viewer.js插件(vue) Viewer.js 是一款强大的图片查看器,像门户网站一般都会有各自的图片查看器,如果您正需要一款强大的图片查看器,也许 Viewer.js 是一个很好的选择.Vie ...
springboot+vue整合pdf.js实现预览pdf
前景回顾: 上一次说到使用浏览器自带的预览pdf功能所遗留的问题,360浏览器不够给力,IE的我没测,估计也不行,于是乎我又翻阅资料(度娘)找到了一种新的实现方式,使用pdf.js实现如果想看使用浏 ...
前端实现图片查看器（滚轮放大，缩小，旋转）——Viewer.js
一.前端实现图片查看器(放大,缩小,旋转)--Viewer.js [附参考链接:(14条消息) Viewer.js第一次点击图片无法显示解决方案(vue使用)_李墨瞳的博客-CSDN博客] 1.0 J ...
viewer.js插件的应用
需求:商品列表中图片点击放大. 实现方法:使用viewer.js插件,实现点击图片图片放大做法: 1.下载viewer.js插件 2.页面上引入相关的插件 <link rel="st ...
vue项目中主要文件的加载顺序（index.html、App.vue、main.js）
先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...
Vue中的Js动画与Velocity.js 的结合
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
vue生成静态js文件_如何立即使用Vue.js生成静态网站
vue生成静态js文件 by Ondřej Polesný 通过OndřejPolesný 如何立即使用Vue.js生成静态网站 (How to generate a static website w ...
viewer.js实现预览效果
我是歌谣放弃很容易但是坚持一定很酷微信公众号关注小歌谣日常分享前后端知识前言最近涉及一个移动端项目需要把其中的图片变成可预览的图片听学弟说可以利用viewer进行实现首先我们需要 ...

vue使用Viewer.js

vue使用Viewer.js

安装

引入

html

js

vue使用Viewer.js相关推荐

最新文章

热门文章