<ul id="8uggc"></ul>

<strike id="8uggc"></strike>

<ul id="8uggc"><dfn id="8uggc"></dfn></ul><del id="8uggc"></del>

項目3種彈框模式

2i18ns 發布于2019-08-20 15:28 / 2908人閱讀

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

一、需求

二、使用插件 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中使用時的報錯

三、注意事項

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

1.Uncaught (in promise) timer

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

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

2.選項報錯 Unknown parameter "closeOnConfirm"

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

四、代碼復制

第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: "", // 標題
    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中使用時的報錯

GPU云服務器云服務器種彈框 js3種彈框下彈框彈框

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82268.html

項目3種彈框模式

摘要：一需求二使用插件在里面使用完整例子不需要的選項就不要設置，詳情看文檔標題文本類型彈框顯示時間點擊確認按鈕執行的操作點擊取消按鈕執行的操作解決在中使用時的報錯三注意事項我在使用過程報錯的幾個地方解決添加這樣代碼選項報錯原因版本修改跟一、需求 showImg(https://segmentfault.com/img/bVLsET?w=2702&h=1834); 二、使用插件 Sweeta...

aaron 2019-08-29 12:20 評論0 收藏0
移動彈窗基礎知識淺析——IOS彈窗體系

摘要：尤其是遇到二次確認等場景因此，打算從頭整理移動彈窗的基礎知識，以彈窗體系為切入點，從定義出發，對移動彈窗進行分類，然后分別分析每一類彈窗的應用場景，以及在使用過程中需要注意的點。摘要：最為常見的【彈窗】反而是最捉摸不定的東西。各種類型的彈窗傻傻分不清楚，不知道在什么場景下應該用哪種彈窗。尤其是遇到二次確認等場景…… 因此，打算從頭整理移動彈窗的基礎知識，以iOS彈窗體系為切入點，從...

jas0n 2019-06-28 10:58 評論0 收藏0
在微信小程序中創建屬于自己的個性彈框

摘要：于是我自己寫一個我的頁面專用的彈框，具體效果如下圖以下是代碼貼圖最外層的樣式主要是寫后面的遮罩層，就是具體的彈框區域彈框的顯示隱藏用控制然后就可以在彈框中寫自己想要展示的效果啦忽略部分未調整樣式微信小程序提供的彈框模版就3種：1、消息提示框showImg(https://segmentfault.com/img/bVbokVL?w=1074&h=554);對應的效果是這樣的 show...

luck 2019-08-30 15:55 評論0 收藏0
在微信小程序中創建屬于自己的個性彈框

摘要：于是我自己寫一個我的頁面專用的彈框，具體效果如下圖以下是代碼貼圖最外層的樣式主要是寫后面的遮罩層，就是具體的彈框區域彈框的顯示隱藏用控制然后就可以在彈框中寫自己想要展示的效果啦忽略部分未調整樣式微信小程序提供的彈框模版就3種：1、消息提示框showImg(https://segmentfault.com/img/bVbokVL?w=1074&h=554);對應的效果是這樣的 show...

yy13818512006 2019-08-23 15:12 評論0 收藏0