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
相关推荐
用户486789525339018 分钟前
Apache ECharts 雷达图详解
前端·javascript
Moment32 分钟前
2025 年,构建高质量 React 项目的技术栈参考 🤔🤔🤔
前端·javascript·react.js
快起来别睡了2 小时前
深入浅出 Event Loop:前端工程师必须掌握的运行机制
前端·javascript
user297525876122 小时前
别再用关键字搜了!手搓一个Vite插件,为页面上的标签打上标记
前端·javascript·vite
典学长编程2 小时前
前端开发(HTML,CSS,VUE,JS)从入门到精通!第五天(jQuery函数库)
javascript·css·ajax·html·jquery
尝尝你的优乐美2 小时前
原来前端二进制数组有这么多门道
前端·javascript·面试
前端_yu小白2 小时前
Vue2实现docx,xlsx,pptx预览
开发语言·javascript·ecmascript
金金金__2 小时前
事件循环-原理篇
javascript·浏览器
CF14年老兵3 小时前
2025 年 React 在 Web 开发中的核心地位:优势、应用场景与顶级案例
javascript·react.js·redux
还是大剑师兰特3 小时前
Javascript面试题及详细答案150道之(046-060)
javascript·大剑师·js面试题