項目3種彈框模式

1、需求

2、使用插件 Sweetalert

在vue裏面使用 vue-sweetalert

npm install vue-sweetalert --save
import VueSweetAlert from 'vue-sweetalert'
Vue.use(VueSweetAlert)

完整例子：（不須要的選項就不要設置，詳情看文檔）

this.$swal({
    title: '', // 標題
    text: 'You will not be able to recover this imaginary file!', // 文本
    type: 'warning', // 類型
    timer: 2000, // 彈框顯示時間
    showCancelButton: true, 
    confirmButtonColor: '#DD6B55',
    confirmButtonText: 'Yes, delete it!'
  }).then(() => { // 點擊確認按鈕執行的操做
    this.$swal('Deleted!', 'Your imaginary file has been deleted.', 'success')
  }, () => { // 點擊取消按鈕執行的操做
    this.$swal('Cancle!', 'Your imaginary file has been cancled.', 'success')
  }).catch(this.$swal.noop) // 解決在vue中使用時的報錯

3、注意事項

我在使用過程報錯的幾個地方

1.Uncaught (in promise) timer

解決：添加這樣代碼catch(this.$swal.noop)

this.$swal({...}).catch(this.$swal.noop)

2.選項報錯 Unknown parameter "closeOnConfirm"

緣由： 版本修改 Migration from SweetAlert to SweetAlert2 跟前面的文檔個別選項設置有衝突，本項目看這個

4、代碼複製

第一、2種

this.$swal({
        title: 'Title',
        text: 'You will not be able to recover this imaginary file!',
      }).catch(this.$swal.noop)

第3種

this.$swal({
    title: '', // 標題
    text: 'You will not be able to recover this imaginary file!', // 文本
    type: 'warning', // 類型
    timer: 2000, // 彈框顯示時間
    showCancelButton: true, 
    confirmButtonColor: '#DD6B55',
    confirmButtonText: 'Yes, delete it!'
  }).then(() => { // 點擊確認按鈕執行的操做
    this.$swal('Deleted!', 'Your imaginary file has been deleted.', 'success')
  }, () => { // 點擊取消按鈕執行的操做
    this.$swal('Cancle!', 'Your imaginary file has been cancled.', 'success')
  }).catch(this.$swal.noop) // 解決在vue中使用時的報錯