想不到吧，elp的el-image組件自帶了一個圖片預覽器，可是并沒有明說給我們使用，但是挖出來。

廢話不多說，操控方式如下：

標簽：<el-image-viewer />

屬性/方法/API：參考element-plus => Image組件 => #Image Viewer API

顯隱控制：改變url-list(即預覽圖數組)長度即可，簡單說就是v-if="urlList.length > 0"，然后@close事件中將urlList置空即可。

老規(guī)矩上圖：

以上，即可實現獨立使用并控制el-image-viewer了；

PPS：如果覺得預覽尺寸鋪滿有點不爽的，請override一下 .el-image-viewer__canvas 這個類，并設置你想要的 transform: scale(xx) 即可。

怪奇理由：這個組件為啥不單獨放出來，一定要自己挖嗎？

更新：element-plus已經更新了此組件文檔 :

https://element-plus.gitee.io/zh-CN/component/image.html#image-viewer-attributes

附上贈@alertO的一個例子