# 分享一个简单的基于ElemenUI封装的全局公用的图片预览组件

* 抖音：<https://v.douyin.com/hnMNUoj/>
* B站：<https://www.bilibili.com/video/BV1vM41117EA/>

> **Demo预览：**
>
> <https://sunzsh.github.io/vue-demos/#/img-viewer>
>
> **代码 / 文件：**
>
> <https://github.com/sunzsh/vue-el-demo/tree/master/src/mixins/MyImgViewer>

分享一个基于饿了么UI

封装的这种可以

全局使用的这种图片预览的组件

那使用起来很简单哈

首先

大家把这两个文件放到自己的项目里

然后啊把它导入在我们项目里最

顶层的这个vue

比如我这个app.vue

把它导进来之后做一个混入mixins

混入之后啊

他就会自动把这个方法

openImgViewer这个方法

注入到他的所有的子页面

比如我们在这个页面要用

我们在这接收一下这个注入

把这个方法接收过来

然后呢用的时候就一行代码

调这个方法传入一个数组就可以了

我现在只传了一个

我再传一张图

两张图比如说我们来看一下

这样就可以了


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://sunzsh.gitbook.io/xiaoshan.bug/fen-xiang-yi-ge-jian-dan-de-ji-yu-elemenui-feng-zhuang-de-quan-ju-gong-yong-de-tu-pian-yu-lan-zu-jia.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.