プラグインsweetalertのVueの実際の使用

インストール
NPMを[email protected] --saveをインストール

封装はsweetalert
のSwaI「sweetalert2」からインポート

デフォルト{エクスポート
インストール:(ヴュを)=> {
//設定のデフォルト構成sweetalert2方法
swal.setDefaults({
タイプ: '警告'、
showCancelButton:真、に
confirmButtonColor: 'RGB(140212245)'、
cancelButtonColor:「RGB(193193193 「)
})

//グローバルメソッドを追加
Vue.swal =のSwaIは
//例の方法を追加
Vue.prototypeを。のSwaI $のSwaI =
}
}

/ *
Vue.jsプラグ方法がインストール開示されている、この方法の最初のパラメータは、コンストラクタのVueあります。
あなたはグローバルメソッドとインスタンスメソッドへのSwaIを追加した後、我々はVue.swal、これによってアクセスすることができるようになります。$のSwaI。

注:インスタンスメソッドを追加すると、$の前にメソッド名は必要ありませんが、我々はそれが部品や紛争によって定義されたプロパティとメソッドを避けるために追加することをお勧めします。
* /
1
2
3
4
5
6
7
8
9
10
11
12である
13である
14
15
16
17
18である
。19
20
21であり、
22は
23である
24
25
入口及びファイル使用して導入される
//ウィジェット導入
「./plugins/vue-sweetalert2'からインポートVueSweetalert2を

//プラグインを使用
Vue.use(VueSweetalert2)
1つの
2
3
4
5
プラグ使用してVueのファイル
ジンバブエログアウトを(){
({。この$のSwaIを
: 'あなたが終了してもよろしいですか?'テキスト
ConfirmButtonText: '終了'
})。その後、 ((RES)=> {
IF(res.value){
この。store.dispatchの$( 'ジンバブエログアウト')
}
})
}
。1
2
3
4
5
6
7
8
9
10
延びる
CONST = Vue.extendメッセージ(MessageComponent)
CONSTメッセージ=新しい新しいVM()
.. EL = constの$ VM $マウント()$ EL
Vue.extendは、その引数は、コンポーネントのオプションを含むオブジェクトである、我々はここで、対応するメッセージのコンポーネントを持って、新しい「サブクラス」を作成するために使用される。
使用何ELは、ターゲットをマウントしていないので、新しいキーワードは、メッセージの新しいインスタンスを作成することができ、現在のインスタンスは、「未実装」状態になっています。
VMを使用してください。$マウント()手動でアンマウントインスタンスをマウントして、現在のインスタンスを返し、時から、我々は$エル例を取得

VM ON $(「更新:ショー」、(値)=> {。
vm.show =値
})
$ ON現在の例にカスタムイベントをリッスンし、最初のパラメータは、名前またはイベントの名前である場合アレイ、
二番目のパラメータであるすべてのパラメータのトリガ機能を受信し、コールバック関数であります
---------------------

おすすめ

転載: www.cnblogs.com/hyhy904/p/10989709.html