vue使用element-ui 实现自定义按钮 多图放大预览

解决问题点
1.开始单纯使用图片预览 但是图片有多张就不行
2.尝试使用弹窗轮播图方式 后来发现不能放大旋转的操作

触发按钮代码块

	<p class="invoice-item"  @click="getPreview()">查看凭证：</p>

主要实现代码

    <el-image-viewer
      v-if="payVoucherDialog"
      :on-close="closeViewer"
      :url-list="payAuditInfo.uploadUrlList"
    ></el-image-viewer>

参数/事件	作用
payVoucherDialog	控制显示隐藏的 触发按钮去改变状态 默认 false
closeViewer	图片预览后关闭的事件触发
payAuditInfo.uploadUrlList	图片存的数组 根据你自己的参数名去修改
getPreview	自定义按钮触发事件 事件中给图片数组存入所要展示的图片

js

  async getPreview() {
      await this.payAuditInfo.uploadUrlList
        ? (this.payVoucherDialog = true)
        : this.$message.info("暂无凭证");
    },
  async closeViewer() {
      await this.payVoucherDialog = false;
  	},