缩略图鼠标经过放大（Element表格循环输出多张图片）

2019独角兽企业重金招聘Python工程师标准>>>

1.代码：

<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/popover

3.效果图

转载于:https://my.oschina.net/u/3734228/blog/3034475