如何点击el-popover上的按键，直接预览图片？

需求：点击el-popover上不同的按键，预览不同的图片。

环境：
npm 9.6.6
node v16.18.1
vue 2.6.10
element-ui ^2.15.1

一、在js中导入

import ElImageViewer from "element-ui/packages/image/src/image-viewer";

二、模块部分：

components: { ElImageViewer }

三、dom部分：

<el-image-viewer
  v-if="showPicViewer"
  :on-close="closeViewer"
  :url-list="srcList"
  :hide-on-click-modal="true"
></el-image-viewer>

showPicViewer ：预览图片的显示与否
closeViewer：预览窗口的关闭事件
srcList：预览翻页的图片数组，长度是1时仅可以预览一张图片，长度>1则可左右滑动
hide-on-click-modal：为true时，点击遮罩层 退出预览（这里切记element-ui版本是2.15.1 比这个版本低的话 大概率不好用，高的话还没试过）

四、方法部分：

// 关闭事件
closeViewer(){
  this.showPicViewer = false
},
// 向导按键 
guideClick(val){// 参数val是循环渲染的那五个按键的value,需要在初始化时声明。
  console.log(val)
  this.showPicViewer = true
  this.srcList = [] //保证每次预览的list数组只有一个值，只有一张图片。
  switch (val) {
    case 'A':
      this.srcList.push(require('../项目里面的图片a.png'))
      break;
    case 'B':
      this.srcList.push(require('../项目里面的图片b.png'))
      break;
    case 'C':
      this.srcList.push(require('../项目里面的图片c.png'))
      break;
    case 'D':
      this.srcList.push(require('../项目里面的图片d.png'))
      break;
    case 'E':
      this.srcList.push(require('../项目里面的图片e.png'))
      break;
    default:
      break;
  }
}

预览画面：考虑到隐秘性我直接把element-plus上的图片拿过来了效果是一模一样的。

完成。