縮略圖鼠標通過放大(Element表格循環輸出多張圖片)

1.代碼:html

<template>
  <span v-for="item in props.row.thumb.split(',')">
    <el-popover 
      placement="left"
      title=""
      trigger="hover"
      width="1000">
        <img :src="item"width="100%"/>
        <img slot="reference" :src="item" :alt="item" 
            style="max-height: 150px;max-width: 150px; padding: 5px">
     </el-popover>
  </span>
</template>

2.簡單解釋數組

  • <e-popover>標籤是一個Popover彈出框
  • <e-popover>標籤內的屬性,placement指出現的位置、title指標題名稱、trigger指觸發的方式、width指彈出框的寬度、v-for指令請自行百度,split指的是以」,「分割字符串獲得一個數組
  • 兩個<img/>標籤,第一個是彈出框顯示的圖片,第二個指的是表格顯示的圖片

     Popover彈出框更多的參數解釋請轉至官網:http://element-cn.eleme.io/#/zh-CN/component/popoverspa

3.效果圖code

相關文章
相關標籤/搜索