记录一下对于 element 的 confirm 封装

作用

主要应用于原有代码已经定下基调，不方便使用 confirm 将整体内容进行嵌套的情况

使用案例

// 原代码
fn(){
  // xxx
  // xxx 省略100行代码
  // xxx => (需要再某些情况下执行一个确认框)
  // xxx 省略1000行代码
}

// 常规 => 这种情况下修改虽然没有问题，但是修改的内容太多了，不好
fn(){
  // xxx
  // xxx 省略100行代码
  this.$confirm('文字提示', '提示', {
    confirmButtonText: 确认,
    cancelButtonText: 取消,
    type: 'warning'
  })
  .then(res => {
    // xxx 省略1000行代码
  })
  .catch(res => {
	
  })
}

封装与使用

/**
 * confirm 二次封装
 * @param {*} text 提示文本
 * @param {*} confirm 确认按钮
 * @param {*} cancel 取消按钮
 * @returns 返回true或false
 */
function confirmFunNew(text, confirm = '确定', cancel = '取消') {
  return new Promise((resolve, reject) => {
    this.$confirm(text, '提示', {
      confirmButtonText: confirm,
      cancelButtonText: cancel,
      dangerouslyUseHTMLString: true, // 使主体内容样式变得丰富
      type: 'warning'
    })
      .then(res => {
        resolve(true)
      })
      .catch(res => {
        resolve(false)
      })
  }).catch(() => {
    // 可对错误进行处理
  })
}

// 使用
async fn(){
  // xxx
  // xxx 省略100行代码
  // const confirmRes = await this.confirmFunNew('xxx<b>样式使用</b>','确认','取消) 
  // if(confirmRes){
  //  // 针对返回结果进行处理
  // }
  // xxx 省略1000行代码
}