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

痛定思痛。 2021-12-15 14:59 1506阅读 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 条评论，1506人围观）

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

相关阅读

相关 jquery 实现图片放大

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

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

相关图片触碰放大

.img-div img { width: 2rem; height: 1.3rem; transition:all 0.5s;/图片放

喜欢ヅ旅行/ 2022年09月07日 09:28/ 0 赞/ 208 阅读

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

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

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

相关图片的自动放大

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

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

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

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

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

相关图片放大效果

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

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

相关图片居中放大

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

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

相关 css图片放大缩小

<!DOCTYPE html> <html> <head> <meta charset="utf-8">

淩亂°似流年/ 2021年09月02日 04:26/ 0 赞/ 561 阅读

相关 JS图片放大缩小

HTML部分代码 <img class="alert_img" onmousewheel="return suofang(this)" style="max-widt

我就是我/ 2021年08月29日 19:30/ 0 赞/ 603 阅读

相关 layui图片放大功能

刚刚的项目里面要做一个图片放大功能，用的layui，直接用layer.open改造了一个，记录一下！页面：

你的名字/ 2020年11月07日 19:00/ 0 赞/ 988 阅读