element-ui MessageBox to Dialog

message-box_01-basic.js

export default {
    methods: {
      openMessageBox () {
        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: 'Delete completed'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: 'Delete canceled'
          });          
        });
      }
    }
  }

message-box_02-asyncawait.js

export default {
    methods: {
      async openMessageBox () {
        try {
          await this.$confirm('This will permanently delete the file. Continue?', 'Warning', {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning'
          })
          
          // MessageBox에서 OK를 눌렀을 때
          this.$message({
            type: 'success',
            message: 'Delete completed'
          });
        } catch (err) {
          // MessageBox에서 Cancel를 눌렀을 때
          this.$message({
            type: 'info',
            message: 'Delete canceled'
          }); 
        }
      }
    }
  }

message-box_03-inuse.js

export default {
    methods: {
      async openMessageBoxToChangePassword () {
        try {
          await this.$confirm('패스워드 위험한데 바꿀래?', 'Warning', {
            confirmButtonText: '바꿀래',
            cancelButtonText: '아니 안바꿀래',
            type: 'warning'
          })
          
          return true
        } catch (err) {
          return false
        }
      },
      async openMessageBoxToChangeAddress () {
        // ...
      },
      async submitRegisterForm() {
        // Part A. 폼 벨리데이션 전 유저한테 물어보기
        if (this.isWeakPassword) {
          let resultOfChangePassword = await this.openMessageBoxToChangePassword();
          
          if (resultOfChangePassword) {
            return false
          }
        }
        
        if (this.isStrangeAddress) {
          let resultOfChangeAddress = await this.openMessageBoxToChangeAddress();
          
          if (resultOfChangeAddress) {
            return false
          }
        }
        
        // Part B. 폼 벨리데이션 및 전송
      }  
    }
  }

message-box_04-inuse-refactored.js

export default {
    methods: {
      async openMessageBoxToChangePassword () {
        // 위와 동일
      },
      async openMessageBoxToChangeAddress () {
        // 위와 동일
      },
      async askMessageBoxes() {
        if (this.isWeakPassword) {
          let resultOfChangePassword = await this.openMessageBoxToChangePassword();
          
          if (resultOfChangePassword) {
            return false
          }
        }
        
        if (this.isStrangeAddress) {
          let resultOfChangeAddress = await this.openMessageBoxToChangeAddress();
          
          if (resultOfChangeAddress) {
            return false
          }
        }
        
        return true
      },
      async submitRegisterForm() {
        let resultOfMessageBoxes = this.askMessageBoxes();
        
        if (!resultOfMessageBoxes) {
          return false;
        }
        
        // Part B. 폼 벨리데이션 및 전송
      }  
    }
  }