글로벌 확인 대화상자 기능 구현에 관한 Vuejs 문제

글로벌 확인 대화상자 기능 구현에 관한 Vuejs 문제

글로벌 확인 대화 상자 기능을 구현하고 있습니다.

예를 들어 다음과 같습니다.사용자가 "게시" 단추를 클릭하여 문서를 게시하면 확인 대화 상자가 열립니다.

1. 사용자는 퍼블리시 버튼을 클릭하면 "openConfirmDialog()" 함수가 트리거됩니다.
2. 확인 대화 상자를 표시합니다.
3. 사용자가 확인 버튼을 클릭할 때까지 기다립니다.
4. confirmDialog.vue의 함수( onConfirm())는 확인 버튼을 클릭하면 트리거됩니다.

문의사항:
How can I pass and trigger a 동적 작용(in this example: pubishArticle ) when the user click the "confirm" button?

컴포넌트 - confirmDialog.vue Cancel 버튼:

  protected onCancel() {
    this.$store.actions.closeConfirmDialog()
  }

Confirm 버튼:

  protected onConfirm() {
    this.$store.actions.proceedConfirmDialog()
  }

확인 대화 상자 vuex 모듈 저장 작업:

  async openConfirmDialog(
    context: ActionContext<ConfirmDialogState, any>,
    payload: SetConfirmDialogPayloadParams
  ) {
    context.commit(types.CONFIRM_DIALOG_SET_CONTENT, payload.content)
  },

확인 버튼 동작:

async proceedConfirmDialog(context: ActionContext<ConfirmDialogState, any>) {}

프런트 엔드 뷰 - 데모vue:

  public openConfirmDialog() {
    this.$store.myActions.openConfirmDialog({
      content: {
        message: 'are you sure?',
      }
    })
  }

기사 vuex 모듈 저장 작업 게시:

async pubishArticle(){....}

버튼 정의를 내부로 전송해 볼 수 있습니다.openConfirmDialog:

public openConfirmDialog() {
  this.$store.myActions.openConfirmDialog({
    content: { message: 'are you sure?' },
    buttons: [
      { text: 'Confirm', onClick: this.onConfirmButtonClicked },
      { text: 'Cancel', onClick: this.onCancelButtonClicked },
    ],

  })
}

OR

버튼을 클릭하면 커스텀이벤트를 내보내고 부모 컴포넌트가 처리하도록 할 수 있습니다.

언급URL : https://stackoverflow.com/questions/64412986/vuejs-problems-with-implement-a-global-confirm-dialog-feature