elmentui this.$confirm使用模板字符串构建HTML结构

avatar
作者
筋斗云
阅读量:0
 tip(){         const  checkingList = [];         const  findList=['入会1','入会2','入会3']  //数组         const  sueccList= [{name:'入会',suecc:'1000',numcot:'1000'},{name:'aaaaa',suecc:'222',numcot:'3333'}]  //数组对象         var message=''       // 使用模板字符串构建HTML结构       if(sueccList.length>0){         message= `         <div>点击取消后至对应游戏重新导入。</div>         <div style='padding: 10px 0px 10px 5px;'>           ${sueccList.map(item => `<p style="text-align: left;opacity:.7">${item.name}:             <span>导入会员卡号</span>${item.suecc},<span>校验通过</span>${item.numcot}            </p>`).join('')}         </div>       `;       }else if(checkingList .length>0){         message=`<div>以下会员卡校验中,请稍后重试</div>         <div  style='padding: 10px 0px 10px 5px;'>           ${checkingList .map(item =>`<p style="opacity:.7">${item}</p>`).join('')}         </div>         `       }else if(findList.length>0){         message=`<div>校验失败,请重新上传正确的会员卡</div>         <div  style='padding: 10px 0px 10px 5px;'>           ${findList.map(item => `<p style="opacity:.7">${item}</p>`).join('')}         </div>         `       }       // 使用Vue的`$createElement`方法创建VNode       var vNode = this.$createElement('div', { domProps: { innerHTML: message } });       this.$confirm(vNode, '提示', {           confirmButtonText: '确定',           cancelButtonText: '取消',           type: 'warning',           dangerouslyUseHTMLString: true,           center: true,           showCancelButton:sueccList.length>0?true:false,           customClass: 'elmessageWidth',           width: '500px' // 设置对话框宽度         }).then(() => {          console.log('确定');         }).catch(() => {           console.log('取消');         });      }    .elmessageWidth{     width:465px; /* 设置确认对话框的宽度 */    }   .el-message-box__header{     border-bottom: solid #cccccc;    }

两个效果图

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!