Element(2) 表格中实现图片的单击放大、悬浮放大、长按放大

痛定思痛。 2021-12-15 14:59 1515阅读 1赞

### 一、实现效果 ###

如下图所示，打算实现一个在table表格中点击图片放大的效果【这里也可以是悬浮放大、长按放大等效果】  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70]

### 二、解决 ###

采用element的popover 弹出框组件

> 可参考element官网给出的demo讲解： https://element.eleme.cn/\#/zh-CN/component/popover

下面直接放代码吧~

<el-table-column align="center" label="二维码图片" width="120" :show-overflow-tooltip="true" prop="image_url">
        <template scope="scope">
            <el-popover placement="right" title="" trigger="click">
                <el-image slot="reference" :src="scope.row.image_url" :alt="scope.row.image_url" style="max-height: 200px;max-width: 200px"></el-image>
                <el-image :src="scope.row.image_url"></el-image>
            </el-popover>
        </template>
    </el-table-column>

trigger属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus 和 manual。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjI1NTU4_size_16_color_FFFFFF_t_70]: /images/20211215/8dc84f408fc84c27b742ac8c8bd1bdc1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1515人围观）

还没有评论，来说两句吧...

相关阅读

相关前端图片放大（Element UI中的el-image，Element UI中的图片放大功能）

Element UI 中，为了实现图片的大图预览功能，可以使用el-image组件配合el-image组件来完成。

Dear 丶/ 2024年04月22日 22:30/ 0 赞/ 81 阅读

相关查看商品图片，鼠标悬浮图片放大js实现

2010-06-07 10:18:46| 分类： [Javascript][]|字号订阅 <%@page language="java" import="java.util.

淩亂°似流年/ 2024年02月19日 21:05/ 0 赞/ 21 阅读

相关 CSS鼠标悬浮图片放大效果

当鼠标移入图片时，图片变大。父容器宽高不变。效果：鼠标移入前： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

客官°小女子只卖身不卖艺/ 2023年10月06日 13:31/ 0 赞/ 23 阅读

相关 jquery 实现图片放大

文章目录一、html、Jquery代码如下二、效果 2.1、初始化加载的页面 2.3、鼠标放到图片

超、凢脫俗/ 2023年07月16日 03:40/ 0 赞/ 39 阅读

相关 jquery图片放大

jquery 图片放大 [点击查看图片放大效果][Link 1] [http://api.buruyouni.com/static/demo/%E6%94%BE%E5%A

爱被打了一巴掌/ 2023年07月13日 10:53/ 0 赞/ 30 阅读

相关鼠标经过，图片会放大（从中心位置放大）

js部分： //鼠标经过a标签，对应的图片会放大效果 var zoom = 1.03; var width = $(thi

叁歲伎倆/ 2022年08月06日 12:13/ 0 赞/ 228 阅读

相关图片的自动放大

图片的自动放大效果大概是今天早上10点钟的样子，我就接收到一个消息，需要进行图片的动态效果，给出的效果图如下： ![效果图][SouthEast]

朴灿烈づ我的快乐病毒、/ 2022年06月14日 06:44/ 0 赞/ 221 阅读

相关 Element(2) 表格中实现图片的单击放大、悬浮放大、长按放大

一、实现效果如下图所示，打算实现一个在table表格中点击图片放大的效果【这里也可以是悬浮放大、长按放大等效果】 ![在这里插入图片描述][watermark_ty

痛定思痛。/ 2021年12月15日 14:59/ 1 赞/ 1516 阅读

相关图片放大效果

<style type="text/css"> {margin:0;padding:0;} /小图样式/ smallimg{

秒速五厘米/ 2021年10月08日 05:28/ 0 赞/ 582 阅读

相关图片居中放大

> 图片居中放大 1.外层一个固定宽高的div,背景图片，相对定位position：relative; 2.div里面包含一个img标签，初始宽高为0px；绝对定位

阳光穿透心脏的1/2处/ 2021年09月10日 08:12/ 0 赞/ 538 阅读