elementUI previewSrcList 调用图片展示组件

最新推荐文章于 2024-08-08 15:00:57 发布

anjia9203

最新推荐文章于 2024-08-08 15:00:57 发布

阅读量1.2w

点赞数

文章标签： ui javascript json ViewUI

原文链接：http://www.cnblogs.com/junwu/p/11607576.html

版权

当业务需求中需要通过按钮触发图片预览时，可以借助elementUI的image-viewer组件来实现。通常官方示例使用的是el-image，但实际操作中，我们可以直接调用image-viewer，并传入previewSrcList属性来达到目的。

摘要由CSDN通过智能技术生成

官方给的示例需要用el-image

<div class="demo-image__preview">
  <el-image 
    style="width: 100px; height: 100px"
    :src="url" 
    :preview-src-list="srcList">
  </el-image>
</div>

但往往业务中可能是一个button 按钮需要调previewSrcList

解决办法是需要调element组件包中的image-viewer.vue

<el-image-viewer
           v-if="showViewer"
           :on-close="closeViewer"
           :url-list="srcList" />


      <el-button @click="onPreview" type="primary">查看图片</el-b