Vue - 实现 PC 图片全屏放大预览(支持多图、切换、缩放、旋转、放大缩小、拖动、图片标题、键盘关闭、缩放比例、循环查看等等)

前言

您可以以指令式、组件形式、JS 形式进行调用预览图片,插件功能强大且健壮。

本文提供从 0-1 实现 图片全屏预览(支持多图) 功能的详细步骤,并提供使用示例,

另外,支持切换、缩放、旋转、放大缩小等功能,如果您不需要可以关掉。


您可以按照自己的需求进行调整配置及样式,如下图所示:

在这里插入图片描述

第一步

注意:如安装使用请改用 cnpm / yarn 进行。

在项目根目录下,执行如下安装命令:

npm install v-viewer --save

第二步

该步骤来注册组件,并且完成配置。

打开项目 main.js 入口文件,加入以下代码:

import Vue from 'vue'

猜你喜欢

转载自blog.csdn.net/weixin_44198965/article/details/125720923