Vue中使用el-popover實現懸浮彈窗顯示圖片預覽

場景

數據庫中存儲照片的磁盤路徑，需要鼠標在el-table的路徑字段上懸浮時彈窗進行

圖片網絡URL的預覽，所以需要在懸浮后對圖片路徑進行磁盤路徑和網絡URL映射路徑

的轉換。

 

 

注：

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

實現

Popover彈出窗

其屬性有

 

 

這里用到其觸發的條件為懸浮

      <el-table-column label="照片路徑" align="center" width="400" prop="photopath">
        <template slot-scope="scope">
          <el-popover placement="top-start" trigger="hover">
            <div style="width: 240px; height: 240px">
              <img
                :src="pcikerFormatter(scope.row.photopath)"
                alt
                style="width: 100%; height: 100%"
              />
            </div>
            <span slot="reference">{{ scope.row.photopath }}</span>
          </el-popover>
        </template>
      </el-table-column>

所以這里在el-table-column中添加template

模板里是div,div里面是img標簽，img的src圖片路徑屬性是函數pickFormatter的返回值，並且獲取圖片路徑作為函數的參數

在方法pcikerFormatter中

    pcikerFormatter(val) {
      if (val.match(/D:\\pic_old\\(\S*)/)) {
        let str = "http://網絡ip:250/" + val.match(/D:\\pic_old\\(\S*)/)[1];
        console.log(str);
        return str;
      } else {
        return "";
      }
    },

這里是獲取photopath這個字段的值為D:\\pic_old開頭的磁盤路徑，因為

在圖片服務器上做了靜態資源映射，所以直接可以將磁盤路徑轉換為網絡URL

如果能直接獲取圖片的網絡URL，就不用走這個格式化的方式， 直接給img的src屬性賦值即可。