> 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这个方法

注入到他的所有的子页面

比如我们在这个页面要用

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

把这个方法接收过来

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

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

我现在只传了一个

我再传一张图

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

这样就可以了