Vue中使用a標簽實現點擊在新標簽頁中打開實現照片預覽

場景

顯示某抓拍系統的照片，在點擊該照片后面的預覽時，在新標簽頁中打開圖片的網絡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,否則彈窗提示。