element 实现带图片的确认弹窗

落日映苍穹つ 2023-01-08 08:16 377阅读 0赞

先看效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70_pic_center]

element 中弹窗是支持自定义编译的，

如果你完整引入了 Element，它会为 Vue.prototype 添加如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此可以采用本页面中的方式调用 。

图片是静态资源这里放到static文件夹下。

设置参数注释写在代码里

this.$confirm(
    '<strong> <img src="@/../static/img/cuo.png" alt="">'+
     '<p>是否创建优惠劵模板</p></strong>',
      '创建优惠劵模板',  //弹窗标题
      { 
    	  dangerouslyUseHTMLString: true,//true的时候message会被作为HTML片段处理
    	   center:true, // 设置弹出框居中对齐
    	   showCancelButton: true, //显示取消按钮
    	   confirmButtonText: '确定',
    	   cancelButtonText: '取消',
    	   beforeClose: (action, instance, done) => { 
    		   if (action === 'confirm') {  //点击确认
    			   done();
    			   window.history.go(-1)
    		   }else{    //点击取消
    			   done();
    		   }
    	   }
    	});

写在最后~ ~ 欢迎大家留言

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/f5404a4679ac4abf9f44121a31e86007.png

发表评论取消回复

表情：

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

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

相关阅读

相关 element组件弹窗对话框

element组件弹窗对话框先设置按钮点击事件实现弹窗对话框显隐，并传入表单数据row供布局使用。 ![在这里插入图片描述][20190902161215787...

偏执的太偏执、/ 2024年04月17日 22:53/ 0 赞/ 55 阅读

相关 element 实现带图片的确认弹窗

先看效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

落日映苍穹つ/ 2023年01月08日 08:16/ 0 赞/ 378 阅读

相关 element 弹窗修改圆角 element Dialog修改圆角 element 弹窗圆角

![在这里插入图片描述][20201219154458152.png] 效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdG

我就是我/ 2022年12月29日 02:18/ 0 赞/ 342 阅读

相关自动点击“请确认是否继续观看”弹窗

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

深藏阁楼爱情的钟/ 2022年12月02日 00:47/ 0 赞/ 246 阅读

相关封装 element 的el-dialog弹窗组件

[封装 element 的el-dialog弹窗组件][element _el-dialog] 封装组件 <template> <el-dia

淡淡的烟草味﹌/ 2022年10月05日 10:54/ 0 赞/ 329 阅读

相关微信小程序带图片弹窗简单实现

怎样实现一个带图片显示的模态视图弹窗呢？有时候我们的确有这个需求，自己实现？不不不，哪有官方的方便！使用官方组件实现图片模态弹窗下面我来介绍一种使用官方组件就能实现的方

骑猪看日落/ 2022年08月30日 11:38/ 0 赞/ 366 阅读

相关 JQuery实现的弹窗效果

这是笔者实际项目中的一个需求，我们先来看看特效。 ![这里写图片描述][20150619162138786] 页面加载时弹出窗口，点击关闭按钮，窗口消失并呈现动画效果。

Bertha 。/ 2022年08月01日 06:03/ 0 赞/ 227 阅读

相关 JavaScript 弹窗(对话框)警告框、确认框、提示框.

JavaScript 弹窗(对话框) 三种消息框：警告框、确认框、提示框。 1. 警告框警告框经常用于确保用户可以得到某些信息。当警告框出现后，

野性酷女/ 2022年06月08日 02:57/ 0 赞/ 474 阅读

相关 JavaScript 刷新或关闭网页时弹窗确认

beforeunload事件在当页面关闭或刷新时调用，事件触发的时候弹出一个有确定和取消的对话框，确定则离开页面，取消则继续待在本页。有两种方法绑定事件，三种方法实现弹窗：

喜欢ヅ旅行/ 2022年05月26日 03:36/ 0 赞/ 355 阅读

相关 JS实现图片弹窗

使用JavaScript和CSS实现点击图片缩略图，创建图片弹窗的功能。需要配置HTML页面，JS代码和CSS代码 HTML代码： <body>

阳光穿透心脏的1/2处/ 2022年04月25日 02:20/ 0 赞/ 360 阅读