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
相关推荐
liu****1 小时前
基于websocket的多用户网页五子棋(八)
服务器·前端·javascript·数据库·c++·websocket·个人开发
San301 小时前
深入理解 JavaScript 函数:从基础到高阶应用
前端·javascript·node.js
芒果茶叶2 小时前
并行SSR,SSR并行加载
前端·javascript·架构
用户785127814703 小时前
从 0 到 1 落地淘宝商品 API 开发:手把手教你采集、分析与避坑(含完整可运行代码)
vue.js
威风的虫3 小时前
JavaScript中的axios
开发语言·javascript·ecmascript
bot5556663 小时前
“企业微信iPad协议”静默 72 小时:一台被遗忘的测试机如何成为私域的逃生梯
javascript·面试
西洼工作室3 小时前
浏览器事件循环与内存管理可视化
前端·javascript·css·css3
曦曜2924 小时前
富文本编辑器
javascript
多啦C梦a4 小时前
React 实战:从 setInterval 到 useInterval,一次搞懂定时器 Hook(还能暂停!)
前端·javascript·react.js
zhangzelin8884 小时前
TypeScript入门指南:JavaScript的类型化超集
前端·javascript·其他·typescript