element this.$confirm按钮样式修改

 修改按钮颜色或者位置间距

this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  customClass:'del-model',
  type: 'warning'
}).then(() => {
    this.$message({
    type: 'success',
    message: '删除成功!'
  });
}).catch(() => {
  this.$message({
    type: 'info',
    message: '已取消删除'
  });          
});
 
//注意这里不能将样式放到scoped中
<style lang='stylus'>
.del-model {
  .el-message-box__btns {
    .el-button:nth-child(1) {
      float:right;
    }
    .el-button:nth-child(2) {
      margin-right:10px;
      background-color:#2d8cf0;
      border-color:#2d8cf0;
    }
  }
}

 下面是修改确认按钮的宽度

 

this.$confirm('确认上架后，该广告将出现在「正在投放」列表中', '是否确认上架', {
     confirmButtonText: '确定',
          center: true,
          showCancelButton: false,
          customClass: 'confirm'
}).then(() => {
    this.$message({
    type: 'success',
    message: '删除成功!'
  });
}).catch(() => {
  this.$message({
    type: 'info',
    message: '已取消删除'
  });          
});
 
//注意这里不能将样式放到scoped中！！！
<style  lang="scss">
.confirm {
  .el-button:nth-child(1) {
    // float: right;
    width: 100px;//修改确认按钮的宽度
  }
  .el-button:nth-child(2) {
 
    margin-right: 10px;
    background-color: #2d8cf0;
    border-color: #2d8cf0;
  }
}

 

 注意这里不能将样式放到scoped中！！！