Vue.js 是一个流行的 JavaScript 框架。它的特点是轻量级、易于学习和使用、功能强大，因此在前端开发领域广受欢迎。

Vue.js 不仅可以帮助开发人员快速构建应用程序，还可以轻松与其他框架和库进行集成。其中一个与 Vue.js 集成的库是 Viewer.js，它是一个用于显示和操作图片和 PDF 文件的 JavaScript 库。在本文中，我们将详细介绍 Viewer.js 的使用方法。

要使用 Viewer.js 在 Vue.js 中显示图片和 PDF 文件，我们首先需要安装它。我们可以使用 npm 来安装 Viewer.js，即在项目目录下运行以下命令：

npm install viewerjs

安装完成后，我们需要将 Viewer.js 添加到 Vue.js 应用程序中。我们可以在 Vue 组件中添加以下代码：

import Viewer from "viewerjs";
Vue.use(Viewer);

现在，我们已经可以在 Vue.js 应用程序中使用 Viewer.js 了。我们可以在模板中使用以下标记来显示图片和 PDF 文件：

<template>
<div>
<img src="your-image.jpg" :data-original="your-image.jpg" alt="your-image" @click="showImage">
<pdf src="your-pdf-file.pdf" @click.native.prevent="showPDF">
</pdf>
</div>
</template>

在此示例中，我们使用了一个带有 data-original 属性的 img 元素和一个 pdf 元素。data-original 属性指定了图像的原始 URL，使 Viewer.js 能够加载和显示它。当用户单击图像或 PDF 元素时，我们可以在 showImage 和 showPDF 方法中使用 Viewer.js 来打开并显示它们。

我们可以通过以下代码来实现 showImage 和 showPDF 方法：

methods: {
showImage() {
const viewer = new Viewer(document.querySelector("img"));
viewer.show();
},
showPDF() {
const viewer = new Viewer(document.querySelector("pdf"));
viewer.show();
}
}

在这些方法中，我们首先创建了一个 Viewer 实例，并将其绑定到当前元素。然后，我们调用 viewer.show() 方法来打开和显示图像或 PDF 文件。

除了显示和操作图片和 PDF 文件，Viewer.js 还提供了许多其他功能。例如，我们可以使用 Viewer.js 的 zoomOut 方法来缩小图像或 PDF 文件，使用 rotate 方法来旋转它们，使用 play 方法来播放它们等等。

总的来说，Viewer.js 是一个非常有用的 JavaScript 库，可以帮助我们轻松地处理图片和 PDF 文件。使用它与 Vue.js 集成，可以让我们在前端开发中更加高效和灵活。