• 微信
您当前的位置: 首页> Vue>

vue确认提示框

作者:Alpha时间:2022-09-24 阅读数:3151 +人阅读
this.$confirm("是否确认标记为作废?", "提示", {
        iconClass: "el-icon-question", //自定义图标样式
        confirmButtonText: "确认", //确认按钮文字更换
        cancelButtonText: "取消", //取消按钮文字更换
        showClose: true, //是否显示右上角关闭按钮
        type: "warning", //提示类型  success/info/warning/error
      })
        .then(function () {  //选择确认进入此方法
          //确认操作
          return updateZFPZ(row.dlmc, row.hkls, "9");  
        })
        .then(() => {  //上一个then()执行成功后执行后续方法
          this.getList();
          this.$modal.msgSuccess("修改成功");
        })
        .catch(function (err) { //取消按钮会视为erro
          debugger;
          //捕获异常
          console.log(err);
        });
    },

this.$confirm弹出确认框,经过选择后进入下一步操作。

this.$confirm("是否确认该操作","提示",{
        iconClass: "el-icon-question",//自定义图标样式
          confirmButtonText: "确认",//确认按钮文字更换
          cancelButtonText: "取消",//取消按钮文字更换
          showClose: true,//是否显示右上角关闭按钮
          type: "warning",//提示类型  success/info/warning/error
      }).then(function(){
          //确认操作
      }).then((data) => {
        //取消操作
      })
      .catch(function (err) {
        //捕获异常
      });

vue this.$confirm中提示的文字换行写法:换行不能用\n。用了< br>发现也是字符串的输出形式,需要使用$createElement来创建。

 const h = this.$createElement
      this.$confirm('提示', {
        title: '提示',
        message: h('div', [h('p', '是否将该账号密码重置为初始密码?'), h('p', '成功后将密码设为默认密码,默认密码为用户账号')]),
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          resetPasswords(params).then((res) => {
            if (res.code == 200) {
              this.$message.success('重置密码成功')
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消重置密码',
          })
        })

修改里面的样式

 message: h('div', [h('p', { style: 'font-size: 18px;margin-bottom:10px;' },'是否将该账号密码重置为初始密码?'), h('p', '成功后将密码设为默认密码,默认密码为用户账号')]),


添加class

如果写成h('div',{class:'...'})就可以定义class,如:

 h('i', { class: 'el-icon-question' })


本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:595397166@qq.com

标签: 小程序

阿尔法

软件开发工程师#全栈工程师

{include file=foot.html}
0.916036s