概述
vue-img-previewer 是一个基于 Vue.js 构建的图片预览组件，可以方便地在网页中展示图片，支持缩放、旋转、拖拽等常用功能。本文将介绍该组件的使用方法，首先需要安装该组件：
npm install --save vue-img-previewer
基础用法
使用 vue-img-previewer 组件只需要在模板中引入并注册即可：
-- -------------------- ---- -------
----------
-----
---- ----------------------------- -------------------- --
------------------ -------------- --------------------- --
------
-----------
--------
------ --------------- ---- -------------------
------ ------- -
----------- -
---------------
--
------ -
------ -
------------- --
------- --------------- --------------
-
--
-------- -
------------------- -
----------------- - -------------------------------------
-
-
-
---------在模板中使用 <vue-img-previewer> 标签，传入 srcs 和 index 两个属性，srcs 为图片链接数组，index 为当前选中的图片下标，例如上述示例中，当前选中的图片下标为 0，即 'image-url-1'。
进阶用法
基础配置
vue-img-previewer 提供了一些基础配置项，可以定制组件的行为。例如，可以通过 transition 属性定制动画效果：
<vue-img-previewer :srcs="images" :index="currentIndex" transition="fade" />
transition 属性值可以是 scale（缩放动画）和 fade（淡入淡出动画），默认值为 scale。
Slot
vue-img-previewer 还支持在图片浏览器上方添加 Slot，可以为图片添加额外的说明性文字。
<vue-img-previewer :srcs="images" :index="currentIndex">
<div slot="header">
这是一个图片浏览器，你可以在此查看所有图片。
</div>
</vue-img-previewer>自定义样式
vue-img-previewer 提供了 3 个 CSS 类，可以通过重载样式定制组件的外观：
.vue-img-previewer: 组件根节点.vue-img-previewer--wrapper: 图片容器节点.vue-img-previewer--content: 图片节点
.vue-img-previewer {
background: rgba(0, 0, 0, 0.5);
}
.vue-img-previewer--content {
box-shadow: 0px 0px 20px -10px rgba(0, 0, 0, 0.5);
}结束语
vue-img-previewer 提供了一种简洁、好用的图片预览方案，可以大大提升网站的用户体验。在实际开发中，可以根据业务需要定制该组件的行为和外观，希望此篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600673dffb81d47349e53c37