介绍
在网页中使用图片是 Web 开发中常见的需求。但有时候我们需要对图片进行一些特别的操作，例如点击图片后可以放大查看，这就需要用到图片预览插件了。今天介绍的是一个比较流行的图片预览插件 @duoa/vue-img-preview。
@duoa/vue-img-preview 是一款基于 Vue.js 和 Viewer.js 开发的图片预览插件，它提供了图片放大、旋转、缩放、拖拽等功能。使用该插件可以快速轻松地实现图片预览功能，它还支持多种图片格式。
安装
使用 @duoa/vue-img-preview 需要先安装 Vue.js。
npm
通过 npm 安装 @duoa/vue-img-preview：
npm install @duoa/vue-img-preview --save
CDN
当然你也可以通过 CDN 引入它：
<script src="https://unpkg.com/@duoa/vue-img-preview@0.5.5/dist/vue-img-preview.min.js"></script>
使用
安装成功后，在需要使用图片预览组件的地方引入该组件并注册，然后即可使用。
-- -------------------- ---- -------
----------
-----
----------------- ---------------- --
------
-----------
--------
------ -------------- ---- -----------------------
------ --------------------------------------
------ ------- -
----- ------
----------- -
--------------
--
------ -
------ -
------- -
-
---- ---------------------------------
------ -----
--
-
---- ---------------------------------
------ -----
-
-
-
-
-
---------props
@duoa/vue-img-preview 组件提供了多种配置项，下面是它的 props 说明：
| 属性名 | 类型 | 是否必填 | 默认值 | 描述 |
|---|---|---|---|---|
| images | Array | 是 | [] | 预览图片的信息集合，每个元素包含 src 和 title 属性 |
| options | Object | 否 | {} | Viewer.js 的配置项，详见 Viewer.js 的文档 |
| events | Object | 否 | {} | 观察者模式中的事件监听器，详见 Viewer.js 的文档 |
| global-options | Object | 否 | {} | 全局配置项，详见下方说明 |
| global-events | Object | 否 | {} | 全局事件监听器，详见下方说明 |
上面的 props 中，最为重要的是 images 属性，它是预览图片的信息集合，每个元素包含 src 和 title 两个属性，其中 src 代表预览图片的资源路径，title 代表图片的标题。
全局配置
@duoa/vue-img-preview 提供了一些全局配置，它们应该在初始化 Vue 实例之前完成。
-- -------------------- ---- -------
------ --- ---- -----
------ -------------- ---- -----------------------
------ --------------------------------------
----------------------- -
---------------- -----
-------- -
------- ----------------- -
-- ------------- --- -------- -
----------- -- ----- - --- ----------------
-
------ -------
-
-
--
--- -----
--- -------
------- - -- ------
--@duoa/vue-img-preview 的全局配置通过 Vue.use() 进行安装并进行初始化。
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| filters.substitution | boolean | true | 是否将 undefined 和 null 替换为一个空字符串 |
| filters.setSrc | function | null | 过滤器函数，用于为 Viewer.js 设置 img 的 src 指向 |
filters.setSrc 是一个过滤器函数，用于为 Viewer.js 设置 img 的 src 指向，例如你可以为指定的图片路径添加时间戳参数，避免浏览器缓存问题。你还可以通过配置 filters.substitution 来控制是否需要对 undefined 和 null 进行替换，默认为 true。
总结
上面是 @duoa/vue-img-preview 的使用教程，通过这个组件可以快速地实现图片预览功能，减少了我们在开发中的重复劳动，同时可以提高用户的体验，是一款非常实用的前端工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672dd0520b171f02e1d21