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

一、实现效果

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

二、解决

采用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。