Element Ui圖片預覽組件經過按鈕觸發圖片預覽

element ui的Image 圖片組件的大圖預覽須要點擊一個圖片才能進行觸發大圖預覽，那麼咱們不想經過點擊小圖進行圖片預覽要怎麼作呢？

預覽

先看下DEMO

場景

項目中須要點擊按鈕去向後臺請求圖片地址，而後再進行大圖預覽

實現思路

咱們能夠把這個默認預覽的小圖用一個統一的圖片進行代替，提早放在項目的靜態文件中，
而後把這個圖片定位到按鈕的上方，再將圖片的透明度設置爲0,這樣點擊按鈕實際上是點擊了按鈕上方的小圖

第一步

咱們先實現個表格樣式

<table border=1>
    <tr>
      <th>序號</th>
      <th>訂單號</th>
      <th>操做</th>
    </tr>
    <tr>
      <td>1</td>
      <td>0356894598</td>
      <td>
        <div class='img'>
          圖片預覽
          <div class="demo-image__preview">
            <el-image lazy :src="url" @click='clickimg' :preview-src-list="srcList">
            </el-image>
          </div>
        </di>
      </td>
    </tr>
</table>

再加點樣式

.img {
  width: 100px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  position: relative;
}
.demo-image__preview {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  cursor:pointer;
}
.demo-image__preview .el-image {
  width: 100%;
  height: 100%;
}

你會發現圖片的小圖脫離文檔裏覆蓋在了文字的上方，而後咱們加個透明度給他

.demo-image__preview {
 ..省略代碼..
 ..省略代碼..
 opacity: 0;
}

這樣，點擊文字其實就是點擊小圖達到以假亂真的效果，而後咱們加入js

data() {
    return {
      url:
        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLMfiju_jWNy52oXUtPINHL9-PKyGJC6i01w&usqp=CAU",
      srcList: []
    };
  },
  methods: {
    async clickimg() {
      this.srcList = [
        (await this.getimgById(0)).src,
        (await this.getimgById(1)).src,
        (await this.getimgById(2)).src
      ];
    },
    getimgById(id) {
      let imglist = [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"
      ];
      return new Promise((res) => {
        res({ src: imglist[id] });
      });
    }
  }

這裏模擬了一個根據id請求圖片的接口，能夠自行替換。
你學會了嗎？