Question

我正在使用vue-swal向用户显示对话框。我已经修改了普通的小马，使其能够满足所需的功能和流程。修改时，我遇到了错误。我的小牛皮上有3个按钮，每个按钮都有特定的功能，单击按钮后需要将其触发。但是，当我单击按钮时，不执行处理程序功能。我试图在每个按钮上放置一个值，并将其用作我条件的变量。我错过了什么？

这里是小牛。

我的代码

swal({
    title: `Checkpoint!`,
    html: `Some Text here.
           <br> <br> <b>
          Some text here?
               </b>
           <br> <br> <br> 
          <button type="button" value="a" class="btn swl-cstm-btn-yes-sbmt-rqst">Yes, Submit Request</button> 
          <button type="button" value="b" class="btn swl-cstm-btn-no-jst-prceed">No, Just proceed</button> 
          <button type="button" value="c" class="btn swl-cstm-btn-cancel" >Cancel</button>`,
   showCancelButton: false,
   showConfirmButton: false,
   }).then((result) => {
       if(result.value === 'a')
       { console.log('Yes, Submit Request was Clicked!') }
       else if(resule.value === 'b')
       { console.log('No, Just proceed was Clicked!') }
       else
       { console.log('Cancel was Clicked!') }
   })

Answer 1

从@jom得到一个想法，现在它正在起作用。

这是我根据swal 2的文档使用的内容。

Swal Multiple Button

这是我的代码：

swal({
   title: `Checkpoint!`,
   html: `Some Text here.
      <br><br> 
      <b> Some text here? </b>
      <br><br><br> 
      <button type="button" class="btn btn-yes swl-cstm-btn-yes-sbmt-rqst">Yes, Submit Request</button> 
      <button type="button" class="btn btn-no swl-cstm-btn-no-jst-prceed">No, Just proceed</button> 
      <button type="button" class="btn btn-cancel swl-cstm-btn-cancel" >Cancel</button>`,
   showCancelButton: false,
   showConfirmButton: false,
   onBeforeOpen: () => {
     const yes = document.querySelector('.btn-yes')
     const no = document.querySelector('.btn-no')
     const cancel = document.querySelector('.btn-cancel')

     yes.addEventListener('click', () => {
         console.log('Yes was Cliked.')
     })

     no.addEventListener('click', () => {
         console.log('no was Cliked.')
     })

     cancel.addEventListener('click', () => {
         console.log('cancel was Cliked.')
     })
   }
})

自定义swal按钮未触发其特定功能

1 个答案: