一个vue中图片预览的插件V-viewer

1.介绍：

v-viewer 是一个用于在 Vue.js 应用中实现图片查看功能的轻量级库，它基于 Viewer.js，提供了一种简单的方式来查看和缩放图片，支持多种操作，如放大、缩小、旋转和全屏查看等。

2.安装使用

2.1下载

npm install v-viewer --save

 2.2    引入注册

2.2.1  vite框架

在你的main.js中引入并且使用这里一定要先去注册组件，之后再去挂载实例。（作者的小提醒）

import Viewer from 'v-viewer';
import 'viewerjs/dist/viewer.css'; // 引入样式
const app = createApp(App);

// 注册插件
app.use(Viewer);
// 挂载应用
app.mount('#app');

2.2.2    nuxt框架 

如果你使用了nuxt框架可以按照以下的方法去注册v-viewer组件

首先在你的plugins文件夹下面创建v-viewer.js并将以下代码放进去

import { defineNuxtPlugin } from '#app';
import Viewer from 'v-viewer';
import 'viewerjs/dist/viewer.css';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(Viewer);
});

然后在你的nuxt.config.js中挂载上你的插件，将以下代码放到你导出的defineNuxtConfig这个实例中

  plugins: [
    '~/plugins/v-viewer.js',
  ],

在你的pages里面直接导入既可以了

import Viewer from 'viewerjs'; // 导入 Viewer.js

2.3使用

2.3.1配置viewerOption

const viewerOptions = {
  // 是否在页面内展示查看器，而不是在全屏模式下
  inline: false,

  // 是否显示工具栏上的按钮
  button: true,

  // 是否显示图片导航栏
  navbar: true,

  // 是否显示当前图片的标题
  title: true,

  // 是否显示工具栏
  toolbar: true,

  // 是否允许移动查看器
  movable: true,

  // 是否允许缩放图片
  zoomable: true,

  // 是否允许旋转图片
  rotatable: true,

  // 是否允许缩放查看器
  scalable: true,

  // 是否启用过渡效果
  transition: true,

  // 是否允许全屏查看
  fullscreen: true,

  // 是否启用键盘操作
  keyboard: true,

  // 指定图片的来源属性，通常是 'src'
  url: 'src',

  // 每次缩放的比例
  zoomRatio: 0.1,

  // 最小缩放比例
  minZoomRatio: 0.01,

  // 最大缩放比例
  maxZoomRatio: 10,

  // 图片查看完成后的回调函数
  viewed: function () {
    console.log('Image viewed');
  },

  // 图片显示时的回调函数
  show: function () {
    console.log('Image shown');
  },

  // 图片隐藏时的回调函数
  hide: function () {
    console.log('Image hidden');
  },

  // 图片查看时的回调函数
  view: function () {
    console.log('Image is being viewed');
  },

  // 图片加载错误时的回调函数
  error: function () {
    console.error('Error loading image');
  }
};

2.3.2使用v-viewer

然后就可以直接在你的dom元素上使用v-viewer这个指令喽

 <div v-viewer="viewerOptions">
    <img src="path/to/image.jpg" alt="Image" />
  </div>

当然你也可以用到img标签上当然小编不建议你这么使用，因为他会存在一些问题，当然你要是不听劝的话也可以试一试，问题不是很大。

3.最后的补充

如果你有一些奇奇怪怪的需求的话比如动态的给dom元素添加v-viewer这个指令的话小编这里可以告诉你使用setAttribute就可以了,但是如果你是动态的去给img标签使用的话，你可能需要去实例化v-viewer代码如下这些代码更应该出现在事件中

const viewer = ref(null); 
if (viewer.value!=null) {
            viewer.value.destroy() 销毁之前的viewer实例
           }
            viewer.value = new Viewer(target, viewerOptions);创建新的实例
这里的target是一个dom元素
            viewer.value.show(target);

其中的target也可以是一个domList，如果是这样的话show方法里面的参数就更应该是个index了

4.小编的祝福

愿你代码无bug，项目顺利上线！！！