0
点赞
收藏
分享

微信扫一扫

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


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


图片预览窗可以用 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之处理图片预览操作_javascript_02

 

举报

相关推荐

0 条评论