vue项目预览照片的插件 v-viewer

查看图片主要使用的旋转、翻转、缩放、上下切换、键盘操作等功能都有。

1、首先是安装

npm install v-viewer --save

2、安装完在main.js里面引用（还要记得引用它的css样式）下面有两种调用方式

import Vue from 'vue'import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'

// vue注册调用方法一：Vue.use(Viewer, {    defaultOptions: {        zIndex: 9999    }})

import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
//vue注册调用方法二：
Vue.use(Viewer);
Viewer.setDefaults({Options: {"inline": true,  //启用 inline 模式 默认false"button": true,　　//显示右上角关闭按钮 默认true"navbar": true,　　//显示缩略图导航 默认true"title": true,　　//显示当前图片的标题 默认true"toolbar": true,　　// 显示工具栏 默认true"tooltip": true,　　// 显示缩放百分比 默认true"movable": true,　　//图片是否可移动 默认true"zoomable": true,　　//图片是否可缩放 默认true"rotatable": true,　　//图片是否可旋转 默认true"scalable": true,　　//图片是否可翻转 默认true"transition": true,　　//使用css3过度 默认true"fullscreen": true,　　//是否全屏 默认true"keyboard": true,　　//是否支持键盘 默认true"url": "data-source" //设置大图片的URL}
});

4、代码的使用

<template><viewer :images="images"><img v-for="src in images" :src="src" :key="src"></viewer>
</template>

说明：只要img中传入对应的图片的src即可，images是接口获取的图片地址数组 [‘images/img01.jpg’, ‘images/img02.jpg’, ‘images/img03.jpg’]

5、放大后效果图：

转载于:https://www.cnblogs.com/wenrain/p/10155936.html

vue项目预览照片的插件 v-viewer相关推荐

VsCode工具开发vue项目必装插件
VsCode工具开发vue项目必装插件目录 VsCode工具开发vue项目必装插件 1.概述 2.VsCode插件清单 2.1.Vetur插件让vue文件代码高亮 2.2.Vue VSCode Sn ...
在 Microsoft Edge 浏览器上安装 Vue 项目调试扩展插件 Vue-Devtools
在 Microsoft Edge 浏览器上安装 Vue 项目调试扩展插件 Vue-Devtools Vue-Devtools 插件是一个 Vue 项目的调试插件 Microsoft Edge 浏览器是 ...
vue项目防抖节流插件的使用
vue项目防抖节流插件的使用 lodash 安装 npm i --save lodash 在main.js引入 import _ from 'lodash' 使用: //防抖 //参数写在functi ...
前端压缩图片 -- vue项目使用localResizeIMG插件 -- 实例
前端压缩图片 -- vue项目使用localResizeIMG插件 -- 实例本博没有新的东西, 都是东拼西凑的. 但是, 组合出了个宝贝, 包括: 文件类型/宽高/大小的校验, 还有展示图片参照 ...
vue项目vscode常用插件
对于很多使用vscode编写vue项目的新手同学来说,可能不知道使用什么插件,这里简单说一下我常用的几款插件. 1. vetur vetur能够实现在 .vue 文件中: 语法错误检查,包括 CSS/ ...
使用H5Stream实现rtsp视频流播放，在Vue项目中 (无插件、可多视频源播放、亲测可用)
本文主要介绍用H5Stream 在Web页面播放摄像头的RTSP视频流,从0到1的过程.包括WebSocket代理.h5ss.bat文件运行一会就自己卡死了.H5ss服务死掉自动定时重启的脚本等可 ...
vue项目中引入插件
(一)Vue引入jquer以及jquery插件步骤 (一)在package.json中添加 (二)安装jquery npm install jquery (三)修改build/webpack.base ...
vue编译速度过慢？大型vue 项目使用dll插件优化编译速度，效果显著
为什么要优化编译速度 vue项目过大,引用的组件过多,当启动项目打包项目或者修改代码的时候会发现编译速度太慢,浪费时间,甚至每改一行代码都可能需要编译三十秒以上,所以必须要优化,这样是在浪费生命如何 ...
vue项目中海康插件的使用
官方文档 :https://open.hikvision.com/docs/3784e07072ee4f09a573d61f20782267 插件版本:视频WEB插件 V1.5.1(见附件)(另附H5 ...

vue项目预览照片的插件 v-viewer

vue项目预览照片的插件 v-viewer相关推荐

最新文章

热门文章

vue项目 预览照片的插件 v-viewer

vue项目 预览照片的插件 v-viewer相关推荐

最新文章

热门文章

vue项目预览照片的插件 v-viewer

vue项目预览照片的插件 v-viewer相关推荐