Как настроить пользовательскую кнопку в модальности swal и функцию отправки от действия к компоненту? Vue Vuex - PullRequest
0 голосов
/ 12 апреля 2020

Приветствие. Мне нужно создать пользовательскую кнопку в модуле swal, которая будет нажимать, чтобы переключить функцию из action.store в компоненте и получить другую функцию из компонента. Я постараюсь объяснить это подробно.

Мой компонент. vue. Я использую плагин vue - html -to-paper (не говоря уже о том, чтобы упомянуть) Мой модал:

<modal id="printThis">
any html code which is not important for you...
<button @click="checkStatus(checkerArray.id, checkerArray.num> Check anythink </button>
</modal>


checkerArray is array which hold id and num like a checkerArray = [id:1 , num: 44];


checkStatus(id, number) {
  this.$store
    .dispatch("controlStatus", {
      id: id,
      num: number
    })
    .then(res => { 
      console.log(res); //this is undefined ???
    })
    .catch(err => {
      console.log(err);
    });
},


print() {  
    this.$htmlToPaper("printThis", null, () => { 
     // THIS FUNCTION ONLY PRINT DATA IN PDF..  
  });
},

мой магазин действий:

  controlStatus({ commit, dispatch }, data) {
    let payload = Helpers.removeObjectProp(data, "vm");
    ApiService.postAPI (payload)
      .then(res => {
        commit("setControlNum", res);
        console.log('check res' , res); //return response good
        if (res.data.ticket.drawing_performed) {
          if (res.data.ticket.paid_out_ticket) {
           THIS HELPERS TRIGGER IS ONLY SWEET ALERT 2 
            Helpers.triggerCustomPopup("info", {
              title: "Status",
              text: "Status is ok."
             // HERE I NEED CUSTOM BUTTON BUTTON WITH HTML:  '<a> Btn </a> NO WORK!
            });
          }

postAPI:

  postAPI (data) {
    return authPost(`API`, data);
  }

мутации:

  setControlNum(state, data) {
    state.controlnum= data;
  }

Мой вопрос прост. Мне нужно поместить пользовательскую кнопку в модальное приятное предупреждение, которое будет брать функцию из компонента и печати и вызывать ее. Мой вопрос: 1. Создайте пользовательскую кнопку в этом модальном triggerCustomPopup 2. Эта кнопка вызовет функцию в компоненте, а функция называется print

Проверьте также мой triggerCustomPopup:

let triggerCustomPopup = (type, message, html) => {
  vue.$swal({
    type: type,
    title: message.title,
    text: message.text,
    showConfirmButton: true,
    showCloseButton: true,
    showCancelButton: false,
    html: html === "winningTicketHtml"
      ? `<div class="wtButtons">
          <button class="swal2-confirm swal2-styled">OK</button>
          <button class="swal2-cancel swal2-styled">Cancel</button>
        </div>`
      : '',
    onOpen() {
      if (html === "winningTicketHtml") {
        collectButton = document.querySelector('.swal2-confirm');
        closeButton = document.querySelector('.swal2-cancel');
        collectButton.addEventListener('click', collectMoney);
        closeButton.addEventListener('click', closeSwal);
      }
    },
    onClose() {
      if (html === "winningTicketHtml") {
        collectButton.removeEventListener('click', collectMoney);
        closeButton.removeEventListener('click', closeSwal);
      }
    },
  });
};

This Пользовательская кнопка не требуется. может ли какой-нибудь сладкий модал просто сработать и вставить туда кнопку

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...