重读vue电商网站19之处理图片预览操作
  TEZNKK3IfmPf 2024年07月27日 23 0

重读vue电商网站19之处理图片预览操作

图片预览窗可以用 el-dialog 组件来做,然后通过 on-preview 函数来处理图片预览的操作。

Js
<!-- 图片预览 -->
<el-dialog title="图片预览" :visible.sync="previewVisable" width="50%">
<img :src="previewPath" class="previewImg">
</el-dialog>通过函数来获取上传图片的真实 url ,然后监听图片预览窗口的打开即可。
Js
// 处理图片预览的操作
handlePreview(file) {
// 获取图片显示的url
this.previewPath = file.response.data.url
this.previewVisable = true
}

最终效果如下:

重读vue电商网站19之处理图片预览操作

【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2024年07月27日 0

暂无评论

推荐阅读
  TEZNKK3IfmPf   2024年08月09日   63   0   0 javascript前端
  I7JaHrFMuDsU   2024年08月09日   55   0   0 vue用户
TEZNKK3IfmPf