製作專案的時候，如果可以跟使用者互動，或許對於彼此的信任度有加分效果，這時候提示視窗是一個很好的選擇！
例如：進入活動首頁可以用彈窗說明活動內容折扣方案，引起使用者瞬間的購物慾望，這樣網頁就有幫需求方達到生意興榮的效果；或是訂單送出有溫馨提醒：訂單已經送出了唷！使用者也會相對安心許多。甚至...寫文章過程中，按右下角「儲存草稿」，出現一個彈跳視窗溫柔地跟我說：儲存成功！這樣也是好的互動，避免出現美麗的誤會。

#套件簡介

Sweetalert2 是一個流行的 JavaScript 插件，用於創建美觀且高度可自訂的彈出式對話框 alert 和模態對話框 modal，可以取代 Window.alert()、Window.confirm() 和 window.prompt()，比原生的彈跳視窗更加美觀且有更高的可變性。

優點：

1. 範例多，漂亮而且可以高度客製化。
2. 可以支援很多設置按鈕、輸入框、倒數計時和進度條等多種功能。
3. 連 momo app 天天簽到領回饋 momo 幣都在用，就知道他的兼容性很高，粉絲很多呀！

SweetAlert2
https://sweetalert2.github.io/#download

#安裝流程

一樣使用 npm 安裝。

npm install sweetalert --save

指令下完送出完成安裝後，可以在 package.json 看到套件名稱和安裝版本。

#開始方法

開始的方法一樣有 2 種：全域註冊 || 按需引入

- 全域註冊

在 main.js 引入

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';

const app = createApp(App)

app.use(VueSweetalert2);

app.mount('#app');

- 按需引入

如果專案評估後會很大，建議可以使用按需引入，這樣可以讓專案瘦身也達到想要的目標。
按需引入是在 .vue 中引入，也就是只要需要用到的地方都要用一次 import，當然也可以抽共用變成全域狀態。

// ES6 Modules or TypeScript
import Swal from 'sweetalert2'

#使用方法

SweetAlert2 的語法，swal("標題", "內文", “success”);。
swal 的第一個參數為 title 的文字，第二個參數為 text 的文字，第三個參數是 icon 的類別。

function showMessage() {
  swal("Good job!", "You clicked the button!", "success");
}

( 圖片來源：SweetAlert 告別看到膩的彈跳視窗 - 鯫生's Coding World )

從官網的 DEMO 可以知道他的主要客製化來自配置項，以下是配置項說明 by 官方文件

#應用

搭配上面的表格，幾乎已經符合需求方的客製化內容，當然這只是我比較常使用到的配置項，還有更多設定可以到官方文件中挖呀~挖呀~挖~
接下來就來分享一下自己比較常使用的應用：

- 抽共用

如果專案中很多地方會用到，可以試著抽共用後，需要用到的頁面再引入，以下是把套件抽出在獨立 js ，需要用到的地方再解構引入。

1. 建立一個新的 .js ，可以命名為 sweetAlert.js。

   import Swal from 'sweetalert2'
   
   export default {
       typicalType(title, text, icon, showConfirmButton) {
           return Swal.fire({
               title,
               text,
               icon,
               showConfirmButton,
               confirmButtonText: `Continue → `,
               confirmButtonColor: '#224772',
               timer: showConfirmButton === true ? '' : 1500
           })
       },
       twoLayerCheckType() {
           return Swal.fire({
               title: 'Are you sure?',
               text: "You won't be able to revert this!",
               icon: 'warning',
               showCancelButton: true,
               confirmButtonColor: '#546f89',
               cancelButtonColor: '#224772',
               confirmButtonText: 'Yes, delete it!'
           })
       }
   }
   

2. 用 import 引入套件，看哪一個 .vue 需要用到就引入在套用 fn 名稱即可。

   <script setup>
   ...
   import Swal from 'sweetalert2'
   import sweetAlert from '@/mixin/sweetAlert'
   
   ...
   function deleteAllTodoItem() {
     if (!todos.value.length) {
       return sweetAlert.typicalType('注意', '目前無任務可以刪除', 'error', `Continue → `)
     }
     sweetAlert.twoLayerCheckType().then((result) => {
       if (result.isConfirmed) {
         localStorage.removeItem('todoList')
         todos.value = []
         sweetAlert.typicalType('完成', '已完成刪除動作', 'success', false)
       } else if (result.isDenied) {
         console.log('取消')
       }
     })
   }
   </script>
   

- input 搭配 axios

電商的後台或是前台使用者要變更相關資料的時候，可以套用 input 進行綁定並且透過 axios 更新資料庫內容。

<template>
    ...
    <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
            取消
        </button>
        <button type="button" class="btn btn-primary" @click="editProduct">
            編輯
        </button>
    </div>
</template>

<script setup>
...
import Swal from "sweetalert2";
import axios from "axios";
const { VITE_APP_URL, VITE_APP_PATH } = import.meta.env;

function editProduct() {
    Swal.fire({
        title: '新增產品資訊',
        input: 'text',
        confirmButtonText: '儲存',
        inputPlaceholder: '請輸入產品資訊'
    }).then((result) => {
        console.log(result)
        if (result.isConfirmed) {
            updateProduct();
            Swal.fire('Saved!', '', 'success');
        } else if (result.isDenied) {
            Swal.fire('Changes are not saved', '', 'info');
        }
    })
}

function updateProduct() {
    let url = `${base_url}/api/${api_path}/admin/product`;
    let method = 'post';
    if (!this.isNew) {
        method = 'put';
        url = `${base_url}/api/${api_path}/admin/product/${this.tempProduct.id}`;
    }
    axios[method](url, { "data": this.tempProduct })
        .then(res => {
            alert(res.data.message)
            this.getProductList();
            productModal.hide();
        })
        .catch(err => {
            console.log(err.response);
            alert(err.response.data.message);
        })
}
</script>

大家應該有感覺...一路走來的套件很像都輪番上陣，確實...目前的應用中幾乎可以交替使用到，例如：

1. 人類是視覺性動物，進入畫面總是想把最好的呈現 google fonts

   (之後會分享其他套件，讓畫面增加動次動次的感覺)

2. 使用 axios 就會考量回傳時間
3. 於是... loading 出現了，當然最理想狀態是讓使用者不要等待，但是有時候...人生難免出現「有時候」
4. 只是有時候不出現，卻出現「萬一」就可能需要提示 sweetalert 啦！