> For the complete documentation index, see [llms.txt](https://sunzsh.gitbook.io/xiaoshan.bug/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](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).

# 分享一个简单的基于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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
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>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.