Vue中使用a标签实现点击在新标签页中打开实现照片预览
场景显示某抓拍系统的照片,在点击该照片后面的预览时,在新标签页中打开图片的网络URL地址。注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现首先在el-table中添加操作列</el-table-column><el-table-columnlabel="操作"alig..
·
场景
显示某抓拍系统的照片,在点击该照片后面的预览时,在新标签页中打开图片的网络URL地址。
注:
博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
首先在el-table中添加操作列
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
width="200"
>
<template slot-scope="scope">
<a class="a-style" @click="handlePreView(scope.row)">预览</a>
</template>
</el-table-column>
在template中添加了a标签并设置了器样式和绑定了点击事件,在点击事件方法中还传递了参数当前行的数据
然后样式a-style用来设置颜色
<style scoped>
.a-style{
color:yellowgreen;
}
</style>
然后在点击事件中
/** 预览按钮操作 */
handlePreView(row) {
const photopath = row.photopath ;
if (photopath.match(/D:\\pic_old\\(\S*)/)) {
let str = "http://静态资源映射所在服务器ip:250/" + photopath.match(/D:\\pic_old\\(\S*)/)[1];
window.open(str,'_blank')
} else {
this.$message({
message: '照片路径格式不对,无法预览',
type: 'warning'
});
}
},
这里首先获取到了photopath这个是存储的图片路径,这里是磁盘的绝对路径,
如果能直接获取图片的网络url直接执行
window.open(str,'_blank')
即可,其中str是打开标签页的url
这里的逻辑是对图片的磁盘路径做了校验,符合规则的话则转换成网络URL,否则弹窗提示。
更多推荐
已为社区贡献36条内容
所有评论(0)