vue3 预览照片的插件 v-viewer

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

1、首先是安装

pnpm install v-viewer viewerjs

 

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

<script lang="ts" setup>
  import Viewer from 'v-viewer';
  import 'viewerjs/dist/viewer.css';

  import { createApp } from 'vue';
  import App from '../../../App.vue';

  const app = createApp(App);
  app.use(Viewer, {
    defaultOptions: {
      inline: false, //默认值：false。启用内联模式。
      button: true, //在查看器的右上角显示按钮。
      navbar: true, //指定导航栏的可见性。
      title: true, //指定标题的可见性和内容。
      toolbar: true, //指定工具栏及其按钮的可见性和布局。
      tooltip: true, //放大或缩小时显示带有图像比率（百分比）的工具提示。
      movable: true, //启用以移动图像。
      zoomable: true, //启用以缩放图像
      rotatable: true, //启用以旋转图像
      scalable: true, //启用以缩放图像。
      transition: true, //为某些特殊元素启用CSS3转换。
      fullscreen: true, //启用以在播放时请求全屏。
      keyboard: true, //启用键盘支持。
      // url: 'src',  //默认值：'src'。定义获取原始图像URL以供查看的位置。
    },
  });

3、代码的使用

<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’]