viewerjs在vue中实现点击图片预览、切换、缩放、拖拽、旋转等功能

1、下载依赖:

npm i viewerjs

2、定义html结构

html 复制代码
<template>
<div>
  <ul class="artBody">
    <li><img src="picture-1.jpg" alt="Picture 1"></li>
    <li><img src="picture-2.jpg" alt="Picture 2"></li>
    <li><img src="picture-3.jpg" alt="Picture 3"></li>
  </ul>
</div>
</template>

3、入viewerjs插件并创建实例

javascript 复制代码
<script setup>
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";

const viewer = ref(null);

onMounted(() => {
  initViewer();
});

const initViewer = () => {
  nextTick(() => {
    if (viewer.value) {
      viewer.value.destroy();
      viewer.value = null;
      return;
    }
    viewer.value = new Viewer(document.querySelector(".artBody"), {
      navbar: true, // 显示导航栏
      toolbar: true, // 显示工具栏
      title: true, // 显示标题
    });
    Array.from(document.querySelector(".artBody")).forEach((val) => {
      val.addEventListener("click", function (e) {
        viewer.show();
        viewer.view(e.target.currentSrc);
      });
    });
  });
};
</script>
  • js中在页面挂载完成后开始创建一个Viewer示例,第一个参数是图片所在的区域,第二个参数为Viewer内置的一些工具栏配置
  • 工具栏选项可在官网查看:viewerjs - npm
相关推荐
爱的叹息8 分钟前
解决 Dart Sass 的旧 JS API 弃用警告 的详细步骤和解决方案
javascript·rust·sass
夕水41 分钟前
这个提升效率宝藏级工具一定要收藏使用
前端·javascript·trae
会飞的鱼先生1 小时前
vue3 内置组件KeepAlive的使用
前端·javascript·vue.js
苹果酱05671 小时前
【Azure Redis 缓存】在Azure Redis中,如何限制只允许Azure App Service访问?
java·vue.js·spring boot·mysql·课程设计
前端大白话2 小时前
前端崩溃瞬间救星!10 个 JavaScript 实战技巧大揭秘
前端·javascript
一千柯橘2 小时前
Nestjs 解决 request entity too large
javascript·后端
举个栗子dhy2 小时前
如何处理动态地址栏参数,以及Object.entries() 、Object.fromEntries()和URLSearchParams.entries()使用
javascript
宁静_致远2 小时前
React Native 技术栈:基于 macOS 开发平台的 iOS 应用开发指南
前端·javascript·react native
H5开发新纪元2 小时前
VS Code 插件开发实战:代码截图工具
javascript·visual studio code
DevUI团队3 小时前
超越input!基于contentediable实现github全局搜索组件:从光标定位到输入事件的全链路设计
前端·javascript