element-plus之element-image-viewer的使用

想通过按钮直接触发图片预览，而不是通过点击图片预览，搜索后发现element的隐藏组件：element-image-viewer。

 template:

<el-table-column  label="图片上传" min-width="10%">
        <template #default="scope">
          <el-button  @click="checkImg(scope.row.imageList)"  :type="scope.row.imageList.length>0?'primary':'info'">{{scope.row.imageList.length>0?'查看':'未上传图片'}}</el-button>
        </template>
</el-table-column>


<el-image-viewer @close="closeImgViewer" :url-list="imageList" v-if="showImageViewer"/>

script:

checkImg(imgList){
      if(imgList.length>0){
        this.showImageViewer=true,
        this.imageList=imgList
      }else{
        this.$alert('当前记录未上传图片', '提示', {
          confirmButtonText: '确定',
        });
      }
    },
 closeImgViewer(){
      console.log(99999)
      this.showImageViewer=false
 }

值得注意的是：由于官方文档没提这个组件，我在别的博客里看到的给组件绑定关闭事件用的都是:on-close="close"，我这样绑定是触发不了关闭事件的，找了好大一圈都没有找到解决方法，最终去官方文档image组件下看了看，尝试着改成了@close="close"没想到居然成功了。。。。。。。。。。。。