屏幕中间弹框的一种写法

需求情景

在网页上点击‘解析验证’按钮，在屏幕上显示弹窗，弹窗中内容为单选按钮，同时要将选中的内容传回后端数据库中

解决方案

点击按钮

 <el-button type="text" icon="el-icon-s-platform" @click="handleVerification(scope.row.id)">解析验证 </el-button>

handleVerification函数

handleVerification(taskid){    //操作下的解析验证按钮处理函数
     this.$msgbox({
       title: ‘提交解析验证结果‘,
       dangerouslyUseHTMLString: true,  // 可以读取html字段
       customClass: ‘verification_dialog‘, // 动态设置这个弹框的class,可以修改样式
       message: ‘<div class="v_dialog"><input class="input1" type="radio" name="resultV" value="1">验证成功</input>‘+
           ‘<input class="input2" type="radio" name="resultV" value="2">下载失败</input></div>‘,
       showCancelButton: true,
       confirmButtonText: ‘确定‘ // 确定按钮的字，可以自己修改
     }).then(action => {
           console.log(taskid)
           console.log($("input[type=‘radio‘]:checked").val())
           postVerificationResults({
             taskId:taskid,
             verifyCode:$("input[type=‘radio‘]:checked").val()
           }).then(res => {
             console.log($("input[type=‘radio‘]"))
             console.log(‘按钮‘,res)
             this.getCrawlList()
             // 对单选按钮进行重置，保证每次进入时为未选中状态
             $("input[type=‘radio‘]")[0].checked=false; 
             $("input[type=‘radio‘]")[1].checked=false;
           })

         }).catch(() => {
             $("input[type=‘radio‘]")[0].checked=false;
             $("input[type=‘radio‘]")[1].checked=false;


     })

完成情况

屏幕中间弹框的一种写法

原文：https://www.cnblogs.com/ANullValue/p/14320139.html