使用场景：

element-ui中，在使用table组件时，有个缩略图的字段，鼠标移入时（hover）可以展示图片的预览图，效果如下：

hover或者click时，需要展示其他内容，则可以通过：Popover 弹出框
popover弹出框官网链接：https://element.eleme.cn/#/zh-CN/component/popover

Popover 的属性与 Tooltip 很类似，它们都是基于Vue-popper开发的
trigger属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus 和 manual。对于触发 Popover 的元素，有两种写法：使用 slot=“reference” 的具名插槽，或使用自定义指令v-popover指向 Popover 的索引ref。

table组件中的用法：

<el-table :data="tableData" v-loading="tableLoading" stripe style="width: 100%">
<el-table-column prop="ProPic" align="center" label="图片" width="112">
    <template slot-scope="scope">
        <el-popover trigger="hover" placement="right">
            <img v-if="scope.row.ShowBigPic" :src="scope.row.ShowBigPic" style="width:300px;height:300px;" />
            <img v-else src="/Content/img/common/pic_big.jpg" style="width:300px;height:300px;" />
            <div slot="reference" class="name-wrapper">
                <img v-if="scope.row.ProPic" :src="scope.row.ProPic" class="imgCls" />
                <img v-else src="/Content/img/common/pic_big.jpg" class="imgCls" />
            </div>
       	 </el-popover>
    	</template>
	</el-table-column>
</el-table>

我们来看popover组件部分：

 <el-popover trigger="hover" placement="right">
   <img v-if="scope.row.ShowBigPic" :src="scope.row.ShowBigPic" style="width:300px;height:300px;" />
   <img v-else src="/Content/img/common/pic_big.jpg" style="width:300px;height:300px;" />
   <div slot="reference">
       <img v-if="scope.row.ProPic" :src="scope.row.ProPic" class="imgCls" />
       <img v-else src="/Content/img/common/pic_big.jpg" class="imgCls" />
   </div>
</el-popover>

需要触发弹出窗的部分，用popover包裹

1. trigger表示弹出窗触发的方式：支持四种触发方式：hover，click，focus 和 manual。
2. placement表示弹窗窗出现的方向：placement属性值为：方向-对齐位置；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。如placement=“left-end”，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。
3. slot="reference"表示触发弹出窗的部分内容，也就是hover之前就存在的内容。