重读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
    }

最终效果如下：