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
相关推荐
喔烨鸭1 小时前
前后端分离情况下,将本地vue项目和Laravel项目以及mysql放到自己的云服务器
vue.js·mysql·laravel
小只笨笨狗~2 小时前
el-dialog宽度根据内容撑开
前端·vue.js·elementui
weixin_490354342 小时前
Vue设计与实现
前端·javascript·vue.js
GISer_Jing3 小时前
React过渡更新:优化渲染性能的秘密
javascript·react.js·ecmascript
烛阴3 小时前
带你用TS彻底搞懂ECS架构模式
前端·javascript·typescript
wayhome在哪3 小时前
3 分钟上手!用 WebAssembly 优化前端图片处理性能(附完整代码)
javascript·性能优化·webassembly
web前端1234 小时前
# 多行文本溢出实现方法
前端·javascript
人间观察员4 小时前
如何在 Vue 项目的 template 中使用 JSX
前端·javascript·vue.js
EndingCoder4 小时前
安装与环境搭建:准备你的 Electron 开发环境
前端·javascript·electron·前端框架
Lucky_Turtle4 小时前
【electron】一、安装,打包配置
javascript·arcgis·electron