ciao-vue-dialog

 

開發動機

不知道有沒有人有一樣的困擾

有時候只是想使用一個類似js alert的功能來顯示訊息

或是類似js confirm做一個確認

但是原生的太陽春

用bootstrap dialog雖然美觀

但是每次都要下那一堆method

然後再湊一堆html來組dialog實在很麻煩

因此我歸納了幾個常用的功能

做了這個ciao-vue-dialog

 

Demo!

 

基本功能

最簡易的使用方式可以直接丟一個string就能使用

跟js alert一樣

this.$dialog('base')

 

要分別設定標題跟內容也沒問題

只要丟給它標題、內容就可以使用

this.$dialog({
  title: 'Hi',
  content: '我是板橋',
})

 

另外還可以透過更多屬性來客製化以下功能

  • 大小,也就是bootstrap dialog的基本三種size)
  • close: 自動關閉的倒數(單位: ms)
  • z-index: 自訂dialog的z-index(預設為1000)
  • accept/dismiss: 設定一個callback methods,類似於使用js confirm確認/取消後的動作

 

更進階的功能

 

在dialog中加入自訂Vue元件

雖然前面介紹的功能已經很夠用

但是有時候往往需要在dialog中加入一些更客製化的功能

這時候可以使用component參數直接注入自訂的Vue元件

如果有需要綁定資料的情境(例如表單)

甚至可以並且透過updateData事件在dialog上綁定資料

最後可以在accept/dismiss的callback參數中取得綁定的資料

能夠很自由的對dialog做客製化

 

更多使用方式請詳見文件

 

loading狀態顯示

一開始我並未開發這個功能

隨著我使用ciao-vue-dialog的次數越來越多我慢慢發現

有時候我們的action(accept/dismiss)並不是即時的

可能是發一支api出去做一些非同步的事情

直接點下accept/dismiss後就直接關閉dialog

但是有些情境是api回應後才能關閉dialog

或是api失敗後不能關掉dialog

因此我才開發這個功能

可看Async Accept Demo

 

只要在accept/dismisss callback中使用await

在等待的期間

dialog將會顯示一個loading的animation表示目前正在處理非同步動作

並且將accept/dismiss按鈕鎖住避免重複觸發

 

this.$dialog({
  title: 'Async Accept',
  accept: {
    callback() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve()
        }, 3000)
      })
    },
  },
})

 

Async Action的錯誤處理

前面有提到

有些情境是await之後我們不希望關掉dialog(例如api操作回應失敗)

這時候我們只要在accept/dismiss中做throw error或是Promise reject動作

dialog只要接到error時就會停止loading而且不會關閉

可看Handle Error in Action Demo

 

如果你希望在自訂元件裡面取得錯誤來使用(例如取得表單欄位錯誤reponse來顯示錯誤訊息)

你可以在自訂元件中使用props的error屬性

來取得你前面throw或是reject出來的error

並且在自訂元件中加以利用處理、呈現錯誤訊息

 

this.$dialog({
  title: 'Handle Error in Action',
  component: CatchError,
  accept: {
    callback() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          reject({
            foo: 'bar',
          })
        }, 3000)
      })
    },
  },
})

 

更多error的使用方式請詳見文件