先 npm 安裝
npm install -S vue-sweetalert2
在 main.js 作 import
import VueSweetalert2 from 'vue-sweetalert2';
Vue.use(VueSweetalert2);
<template>
<button click="showAlert">Hello world</button>
</template>
<script>
export default {
methods: {
showAlert() {
// Use sweetalert2
this.$swal('Hello Vue world!!!');
},
},
};
</script>
參考資料範例：
@click 指向方法，然後在方法中簡單一行就可以使用 Sweetalert了，接下來就是更改
預設樣式，
作一些修改。
目前作品作的部分：
addCart (id, quantity = 1) {
const api =
`${process.env.VUE_APP_APIPATH}api/${process.env.VUE_APP_UUID}/ec/shopping`
const cart = {
product: id,
quantity
}
this.$http.post(api, cart)
.then((res) => {
this.getCart()
this.$swal({
icon: 'success',
title: '加入購物車成功!',
text: '可以繼續選購其他商品',
button: 'OK'
})
})
.catch((error) => {
this.$swal({
icon: 'error',
title: '加入購物車失敗!',
text: '請重新選購',
button: 'OK'
})
})
},
可以看到除了簡單輸入文字外，簡單的在{}內就可以設置icon、title、text
(彈出視窗中間的主要內容)、button(下面的按鈕)。
Sweetalert 內建 icon 有四種樣子，
分別是 "error" 叉叉、 "success" 打勾、 "info" 跟 "warning" 我沒用到，四種常見的 icon ，
除了簡單的樣式之外還可以加入星等評分，甚至一些更複雜的 JS 功能，不過有寫到再研究，
簡單的寥寥幾行就可以有一個漂亮的警示視窗已經很滿意了。
參考資料：
https://sweetalert.js.org/guides/
https://www.npmjs.com/package/vue-sweetalert2
