在 Vue 應用 SweetAlert

      要做常見的點擊後跳出 moadl 的視窗提醒，用 alert 做關鍵字搜尋發現這個好看的套件， 

 先 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