場景

顯示某抓拍系統的照片，在點擊該照片后面的預覽時，在新標簽頁中打開圖片的網絡URL地址。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

首先在el-table中添加操作列

????? </el-table-column><el-table-columnlabel="操作"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,否則彈窗提示。

總結

以上是生活随笔為你收集整理的Vue中使用a标签实现点击在新标签页中打开实现照片预览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。