快速上手

安装

npm install v-viewer

旧项目升级注意

新版本无需显式安装 viewerjs 依赖，也无需在使用时引入 viewerjs 的 CSS 文件了。

自定义样式

引入全局 CSS 覆盖默认样式：

import './viewer.css'

/* viewer.css */
.viewer-container.viewer-backdrop {
  background-color: rgba(0, 0, 0, 0.85);
}

.viewer-container .viewer-title {
  color: #fff;
  font-size: 14px;
}

完全替换默认样式

使用 v-viewer/unstyled 保留全部功能，关闭自动加载 CSS：

import { Viewer } from 'v-viewer/unstyled'
import './viewer-theme.css'

可从 Viewer.js 仓库下载默认样式 viewer.css，保存为 viewer-theme.css 后修改。

基本使用方式

组件

适合对工具栏有定制需求、动态渲染 Markdown 或 HTML 等未知图片内容的复杂场景。默认监听组件内部 <img> 元素的增删和属性变化，自动更新图库。详细用法见组件。

<script setup>
import { Viewer } from 'v-viewer'
const images = ['/photo.jpg']
</script>

<template>
  <Viewer :toolbar="true">
    <img v-for="src in images" :key="src" :src="src" />
  </Viewer>
</template>

指令

适合无需复杂定制需求的简单浏览场景，同时支持动态渲染 Markdown 或 HTML 等未知图片内容。默认监听指令绑定元素内部 <img> 元素的增删和属性变化，自动更新图库。详细用法见指令。

<script setup>
import { vViewer } from 'v-viewer'
</script>

<template>
  <div v-viewer="{ toolbar: true }">
    <img src="/photo.jpg" alt="Landscape" />
  </div>
</template>

API

适合按钮触发后打开指定图片数组等场景。详细用法见 API。

<script setup>
import { useViewer } from 'v-viewer'
const { show } = useViewer({ images: ['/photo.jpg'] })
</script>

<template><button @click="show()">Open gallery</button></template>

其他导入方式

CommonJS

const { Viewer, vViewer, useViewer } = require('v-viewer')

浏览器全局

<link rel="stylesheet" href="https://unpkg.com/viewerjs/dist/viewer.css" />
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/viewerjs"></script>
<script src="https://unpkg.com/v-viewer"></script>
<div id="app">
  <div v-viewer><img src="photo.jpg" /></div>
</div>
<script>
  Vue.createApp({ directives: { viewer: VueViewer.vViewer } }).mount('#app')
</script>