項(xiàng)目3種彈框模式

aaron 發(fā)布于2019-08-29 12:20 / 849人閱讀

摘要：一需求二使用插件在里面使用完整例子不需要的選項(xiàng)就不要設(shè)置，詳情看文檔標(biāo)題文本類型彈框顯示時(shí)間點(diǎn)擊確認(rèn)按鈕執(zhí)行的操作點(diǎn)擊取消按鈕執(zhí)行的操作解決在中使用時(shí)的報(bào)錯(cuò)三注意事項(xiàng)我在使用過程報(bào)錯(cuò)的幾個(gè)地方解決添加這樣代碼選項(xiàng)報(bào)錯(cuò)原因版本修改跟

一、需求

二、使用插件 Sweetalert

在vue里面使用 vue-sweetalert

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

完整例子：（不需要的選項(xiàng)就不要設(shè)置，詳情看文檔）

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

三、注意事項(xiàng)

我在使用過程報(bào)錯(cuò)的幾個(gè)地方

1.Uncaught (in promise) timer

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

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

2.選項(xiàng)報(bào)錯(cuò) Unknown parameter "closeOnConfirm"

原因：版本修改 Migration from SweetAlert to SweetAlert2 跟前面的文檔個(gè)別選項(xiàng)設(shè)置有沖突，本項(xiàng)目看這個(gè)

四、代碼復(fù)制

第1、2種

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

第3種

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