v-viewer：一个方便易用的vue3 图片查看器
v-viewer中文文档

一、安装

1、npm/yarn 安装

npm install v-viewer@next or yarn add viewer@next

全局注册插件

引入v-viewer及必需的css样式，并使用app.use()注册插件
组件、指令和api会被一起安装到app全局

import { createApp } from 'vue'
import App from './App.vue' // 视自己项目而定
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'const app = createApp(App)app.use(VueViewer, {defaultOptions: {// 自定义默认配置}
}

局部注册

import 'viewerjs/dist/viewer.css'
import { component as Viewer } from "v-viewer"export default {components: { Viewer },
}

2、cdn引入：

<link href="//unpkg.com/viewerjs/dist/viewer.css" rel="stylesheet">
<script src="//unpkg.com/viewerjs/dist/viewer.js"></script>
<script src="//unpkg.com/v-viewer@next/dist/index.umd.js"></script>

全局注册插件：

app.use(VueViewer.default, {defaultOptions: {// 自定义默认配置}
}

二、main.js设置默认配置

viewerjs - options
v-viewer: Live demo

示例：

defaultOptions: {zIndex: 3000,inline: false, // Default: false. Enable inline mode.button: true, // Show the button on the top-right of the viewer.navbar: true, // Specify the visibility of the navbar.title: false, // Specify the visibility and the content of the title.toolbar: false, // Specify the visibility and layout of the toolbar its buttons.tooltip: true, // Show the tooltip with image ratio (percentage) when zooming in or zooming out.movable: true, // Enable to move the image.zoomable: true, // Enable to zoom the image.rotatable: false, // Enable to rotate the image.scalable: true, // Enable to scale the image.transition: true, // Enable CSS3 Transition for some special elements.fullscreen: false, // Enable to request full screen when play.keyboard: true, // Enable keyboard support.url: 'src', // Default: 'src'. Define where to get the original image URL for viewing.
}

三、使用

通过指令调用：

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

组件形式使用：

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

通过API调用：

<a v-if="images?.length" @click="showImagesInViewer(images)">查看</a>

showImagesInViewer(urls) {urls instanceof Array &&urls?.length &&this.$viewerApi({ images: urls })
},

vue3 setup

由于全局注册v-viewer，组件、指令和api会被一起安装到app全局，可直接获取并使用全局变量 $viewerApi

import { getCurrentInstance } from 'vue'const $viewerApi = getCurrentInstance().appContext.config.globalProperties.$viewerApi$viewerApi({ images: [] })

或者，手动导入 api 使用
感谢 @高中不复，大学纷飞在评论区补充的方案

import { api as viewerApi } from 'v-viewer'viewerApi({ images: [] })

v-viewer：vue3图片查看器相关推荐

viewer.js图片查看器
viewer.js插件(vue) Viewer.js 是一款强大的图片查看器,像门户网站一般都会有各自的图片查看器,如果您正需要一款强大的图片查看器,也许 Viewer.js 是一个很好的选择.Vie ...
强大的jQuery图片查看器插件Viewer.js
简介 Viewer.js 是一款强大的图片查看器 Viewer.js 有以下特点: 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转) 支持水平/垂直翻转支持图片移动 ...
html手机端的图片阅读器,兼容移动端与电脑端的图片查看器viewer.js插件
Viewer.js 有以下特点: 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转) 支持水平/垂直翻转支持图片移动支持键盘支持全屏幻灯片模式(可做屏保) 支持缩略 ...
图片在线预览html,Viewer.js – 强大的JS/jQuery图片查看器
Viewer.js – 强大的JS/jQuery图片查看器分类:代码日期:2016-08-04 点击(282,284) 下载(1) 来源:未知收藏简介 Viewer.js 是一款强大的图片查看 ...
图片查看器 Viewer.js
插件简介 Viewer.js 是一款强大的图片查看器,提供了纯 JS 版本和 jQuery 版本,具有以下特点: 支持移动设备触摸事件支持响应式支持放大.缩小支持旋转(类似微博的图片旋转) 支持 ...
windows照片查看器没了_Secondary Display Photo Viewer(图片查看器)下载
Secondary Display Photo Viewer(图片查看器)是一款非常棒的图片查看类软件哦,这款软件能够帮助用户们进行幻灯片的查看使用等,1大量的编辑功能也让用户们喜爱哦~ Second ...
Viewer.js Javascript/jQuery图片查看器
简介 Viewer.js 是一款强大的图片查看器,像门户网站一般都会有各自的图片查看器,如果您正需要一款强大的图片查看器,也许 Viewer.js 是一个很好的选择.Viewer.js 有以下特点: ...
前端实现图片查看器（滚轮放大，缩小，旋转）——Viewer.js
一.前端实现图片查看器(放大,缩小,旋转)--Viewer.js [附参考链接:(14条消息) Viewer.js第一次点击图片无法显示解决方案(vue使用)_李墨瞳的博客-CSDN博客] 1.0 J ...
图片查看器viewer
最近在研究图片查看器,支持图片预览上一张,下一张,旋转,放大,缩小,拖拽. 发现大方美观的还是很少,bootstrap中有个插件叫inputfile.js,这个插件的图片预览没有旋转功能,也没有放大和 ...

v-viewer：vue3图片查看器