render函数生成图片弹窗实例(自己项目实际代码）

时飞发布于2019-08-26 13:41 / 1510人阅读

摘要：项目中列表显示缩略图，决定做一个双击的图片弹窗效果，项目用的的框架，用到组件的，以下是函数生成的图片弹框的原始代码。第二个参数是一个对象，定义了图片的，里是图片路径，定义了图片显示的宽度，这个宽度值可以根据宽度大小对应做调整。

项目中列表显示缩略图，决定做一个双击的图片弹窗效果，项目用的iview的UI框架，用到Modal组件的，以下是render函数生成的图片弹框的原始代码。双击动作调用showLargeImage方法，以下是双击动作的原始代码

showLargeImage(item){
    console.log(111);
    if(!item.img_url){
        this.$Message("未获取到图片！");
        return;
    }
    this.$Modal.confirm({
        width:444,
        render: (h) => {
            return h("img", {
                "class":"render_img",
                attrs: {
                    src: this.api.baseURL+item.img_url,
                    width:400,
                },
            })
        }
    })
},

render中第一个箭头函数的参数h就是createElement方法，createElement的第一个字符串形式的参数img是标签。

第二个参数是一个对象，定义了图片的class，attrs里src是图片路径，width定义了图片显示的宽度，这个宽度值可以根据Modal宽度大小对应做调整。

超融合服务器私有云 js生成弹窗 webrtc怎么实际应用在项目中图片实际宽高图片弹窗

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109307.html

从Dialog管理谈到Vue渲染原理

摘要：在组件内，我们触及不到组件的模板，所以简单的在动态模板上添加并不能完成事件监听。简单来说，依赖收集是在渲染函数渲染的函数中进行的，在中一旦通过使用了这个变量，通过这个变量的就收集到了正在执行的渲染函数这一个依赖。作为一个中后台表单&表格工程师，经常需要在一个页面中处理多个弹窗。我自己的项目中，一个复杂的审核页面中的弹窗数量超过了30个，如何管理大量的弹窗就成为了一个需要考虑的问题。 ...

darkbug 2019-08-23 13:56 评论0 收藏0
如何将jsx代码放到自定义的dom中？- ReactDOM.render - React

摘要：如何将代码放到自定义的中真实经历最近开发项目的时候，需要实现图片的预览并下载，想着也不难，自己写一个预览效果吧。如何将jsx代码放到自定义的dom中？ - Eric 真实经历最近开发项目的时候，需要实现图片的预览并下载，想着也不难，自己写一个预览效果吧。其实预览就是一个弹窗(Modal)，实现弹窗有两种方案：1、使用es6的写法，直接将弹窗和按钮放在一起，代码大概如下： /* I...

joywek 2019-08-02 11:55 评论0 收藏0
如何将jsx代码放到自定义的dom中？- ReactDOM.render - React

摘要：如何将代码放到自定义的中真实经历最近开发项目的时候，需要实现图片的预览并下载，想着也不难，自己写一个预览效果吧。如何将jsx代码放到自定义的dom中？ - Eric 真实经历最近开发项目的时候，需要实现图片的预览并下载，想着也不难，自己写一个预览效果吧。其实预览就是一个弹窗(Modal)，实现弹窗有两种方案：1、使用es6的写法，直接将弹窗和按钮放在一起，代码大概如下： /* I...

PumpkinDylan 2019-08-23 12:50 评论0 收藏0
一个基于React整套技术栈+Node.js的前端页面制作工具

摘要：是一个前端页面制作工具，方便产品，运营和视觉的同学迅速开发简单的前端页面，从而可以解放前端同学的工作量。支持恢复现场功能关闭页面配置不丢失支持操作。提供了一个方法，用于的拆分。就是发出的通知，表示应该要发生变化了。 pagemaker是一个前端页面制作工具，方便产品，运营和视觉的同学迅速开发简单的前端页面，从而可以解放前端同学的工作量。此项目创意来自网易乐得内部项目nfop中的page...

ermaoL 2019-08-26 11:46 评论0 收藏0
React中使用UEditor

摘要：前言本文将介绍笔者在的项目中使用百度的富文本编辑器的过程。以百度官网的为例，控制台输入为该编辑器注册点击事件，当点击加粗按钮时，控制台输出为了避免点击工具条时触发事件，笔者将自定义的事件全部注释了。前言本文将介绍笔者在React的项目中使用百度的富文本编辑器Ueditor的过程。注意本文不提供一条龙式的使用方法，只是将使用过程中的一些实现思路进行总结，供以参考。react项目中导入...

firim 2019-08-26 12:17 评论0 收藏0