element table组件实现鼠标移入hover展示图片大图功能——Popover 弹出框组件的使用

缺乏、安全感 2021-07-26 02:43 1184阅读 0赞

使用场景：

`element-ui`中，在使用`table`组件时，有个缩略图的字段，鼠标移入时（hover）可以展示图片的预览图，效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
`hover`或者`click`时，需要展示其他内容，则可以通过：**Popover 弹出框**  
[popover弹出框官网链接：https://element.eleme.cn/\#/zh-CN/component/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之前就存在的内容。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/de4118b8231243c8af1888b041dea55b.png
[popover_https_element.eleme.cn_zh-CN_component_popover]: https://element.eleme.cn/#/zh-CN/component/popover