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
相关推荐
10年前端老司机1 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
前端小趴菜057 小时前
React - createPortal
前端·vue.js·react.js
晓13137 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
烛阴8 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7899 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼9 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原9 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
白仑色10 小时前
完整 Spring Boot + Vue 登录系统
vue.js·spring boot·后端
阳火锅10 小时前
Vue 开发者的外挂工具:配置一个 JSON,自动造出一整套页面!
javascript·vue.js·面试
每天吃饭的羊10 小时前
react中为啥使用剪头函数
前端·javascript·react.js