摘要：项目中列表显示缩略图，决定做一个双击的图片弹窗效果，项目用的的框架，用到组件的，以下是函数生成的图片弹框的原始代码。第二个参数是一个对象，定义了图片的，里是图片路径，定义了图片显示的宽度，这个宽度值可以根据宽度大小对应做调整。
项目中列表显示缩略图，决定做一个双击的图片弹窗效果，项目用的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宽度大小对应做调整。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/109307.html
摘要：在组件内，我们触及不到组件的模板，所以简单的在动态模板上添加并不能完成事件监听。简单来说，依赖收集是在渲染函数渲染的函数中进行的，在中一旦通过使用了这个变量，通过这个变量的就收集到了正在执行的渲染函数这一个依赖。 作为一个中后台表单&表格工程师，经常需要在一个页面中处理多个弹窗。我自己的项目中，一个复杂的审核页面中的弹窗数量超过了30个，如何管理大量的弹窗就成为了一个需要考虑的问题。 ...
摘要：如何将代码放到自定义的中真实经历最近开发项目的时候，需要实现图片的预览并下载，想着也不难，自己写一个预览效果吧。 如何将jsx代码放到自定义的dom中？ - Eric 真实经历 最近开发项目的时候，需要实现图片的预览并下载，想着也不难，自己写一个预览效果吧。其实预览就是一个弹窗(Modal)，实现弹窗有两种方案：1、使用es6的写法，直接将弹窗和按钮放在一起，代码大概如下： /* I...
摘要：如何将代码放到自定义的中真实经历最近开发项目的时候，需要实现图片的预览并下载，想着也不难，自己写一个预览效果吧。 如何将jsx代码放到自定义的dom中？ - Eric 真实经历 最近开发项目的时候，需要实现图片的预览并下载，想着也不难，自己写一个预览效果吧。其实预览就是一个弹窗(Modal)，实现弹窗有两种方案：1、使用es6的写法，直接将弹窗和按钮放在一起，代码大概如下： /* I...
摘要：是一个前端页面制作工具，方便产品，运营和视觉的同学迅速开发简单的前端页面，从而可以解放前端同学的工作量。支持恢复现场功能关闭页面配置不丢失支持操作。提供了一个方法，用于的拆分。就是发出的通知，表示应该要发生变化了。 pagemaker是一个前端页面制作工具，方便产品，运营和视觉的同学迅速开发简单的前端页面，从而可以解放前端同学的工作量。此项目创意来自网易乐得内部项目nfop中的page...
摘要：前言本文将介绍笔者在的项目中使用百度的富文本编辑器的过程。以百度官网的为例，控制台输入为该编辑器注册点击事件，当点击加粗按钮时，控制台输出为了避免点击工具条时触发事件，笔者将自定义的事件全部注释了。 前言 本文将介绍笔者在React的项目中使用百度的富文本编辑器Ueditor的过程。注意本文不提供一条龙式的使用方法，只是将使用过程中的一些实现思路进行总结，供以参考。react项目中导入...
阅读 805·2021-09-22 15:18
阅读 1158·2021-09-09 09:33
阅读 2739·2019-08-30 10:56
阅读 1159·2019-08-29 16:30
阅读 1455·2019-08-29 13:02
阅读 1436·2019-08-26 13:55
阅读 1622·2019-08-26 13:41
阅读 1908·2019-08-26 11:56
