Vue中使用a标签实现点击在新标签页中打开实现照片预览

爱被打了一巴掌 2022-10-16 07:47 826阅读 0赞

# 场景 #

显示某抓拍系统的照片，在点击该照片后面的预览时，在新标签页中打开图片的网络URL地址。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][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用来设置颜色

然后在点击事件中

/** 预览按钮操作 */
        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,否则弹窗提示。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: /images/20221014/f9b492e402eb426d8d13c8e2673e231a.png
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi