> 這篇文章會與大家分享 **SweetAlert2 彈跳視窗套件** 的相關使用說明。
> 關於 HTML 頁面的使用、以及 Vue3 在 Options API / Composition API 的使用都會一併分享給大家，那我們就開始吧！
# SweetAlert2
當網頁有需要美觀又可客製化的彈跳視窗，第一首選我會推薦 **[SweetAlert2](https://sweetalert2.github.io/)**。
**[SweetAlert2](https://sweetalert2.github.io/)** 便於使用在各種情境，**不但 icon、文字、按鈕的顏色有提供客製化調整，連彈窗本身的主題顏色都是可以改變的**，幫助我們輕鬆提升網站風格一致性！
## HTML 頁面使用方式
### 1. 安裝方式
透過 CDN 的方式新增於 ***HTML*** 檔案的 `<body></body>` 內：
```html
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
```
### 2. 開始使用
方便展示，這邊直接將 `<script></script>` 新增在 ***HTML*** 檔案中：
```javascript
Swal.fire({
title: 'Error!',
text: 'Do you want to continue',
icon: 'error',
confirmButtonText: 'NO'
})
```
#### 完整程式碼
#### 完成後彈跳視窗
## Vue CLI 使用方式
這部分主要分享 **Vue3** 搭配 **Vue CLI** 的操作，其中分為 **Options API / Composition API** 兩種撰寫方式給大家參考。
### 1. 安裝方式
* 首先使用 **npm** 進行安裝，[參考文件](https://www.npmjs.com/package/vue-sweetalert2)
```
npm install -S vue-sweetalert2
```
* 完成後回到 ***main.js*** 進行元件註冊
```javascript
import VueSweetalert2 from 'vue-sweetalert2';
import 'sweetalert2/dist/sweetalert2.min.css';
const app = createApp(App)
app.use(VueSweetalert2);
```
### 2. Options API - 開始使用
選擇要顯示彈窗的頁面進行設定，這邊我們以 ***HomeView.vue*** 為例：
* 透過 `this.$swal()` 去包覆彈窗內容，這邊以基本會使用到的內容為例，若需更多彈窗內容可以參考[官方文件](https://sweetalert2.github.io/#configuration)。
```html=
<script>
export default {
methods: {
showAlert () {
this.$swal({
title: 'Warning!!!!',
text: 'Do you want to continue',
icon: 'warning',
confirmButtonText: 'OK'
})
}
},
mounted () {
this.showAlert()
}
}
</script>
```
* 若是喜歡一行寫完的人，這裡也是可以進行縮寫沒問題的！
```html=
<script>
export default {
methods: {
showAlert () {
this.$swal('Warning!', 'Do you want to continue', 'warning', 'OK')
}
},
mounted () {
this.showAlert()
}
}
</script>
```
#### 完成後彈跳視窗
* 別忘了我們剛剛有提到樣式都是可以客製化的，這邊就直接來調整 **icon、文字、按鈕**的顏色：
* 這邊透過 `color`、`iconColor`、`confirmButtonColor` 來進行相關顏色調整，若有更多客製需求都可以參考官方 [#Configuration Params](https://sweetalert2.github.io/#configuration)
```javascript
this.$swal({
title: 'Warning!!!!',
text: 'Do you want to continue',
color: '#D57A66',
icon: 'warning',
iconColor: '#E9D985',
confirmButtonText: 'OK',
confirmButtonColor: '#6D9BA8'
})
```
#### 修改樣式後彈跳視窗
### 2. Composition API - 開始使用
選擇要顯示彈窗的頁面進行設定，這邊我們以 ***HomeView.vue*** 為例：
* 首先 ***import*** `Swal` 到 ***HomeView.vue***
* 接著透過 `Swal.fire()` 來新增彈跳視窗
* 這邊在 `onMounted()` 呼叫該彈窗，一進到頁面就可以看到
* 最後記得要 `return` ***showAlert***
```html
<script>
import Swal from 'sweetalert2'
export default {
setup () {
const showAlert = () => {
Swal.fire({
title: 'Hello!',
text: 'Welcome to my website',
icon: 'success',
confirmButtonText: 'continue'
})
}
onMounted(() => showAlert())
return {
showAlert
}
}
}
</script>
```
#### 完成後彈跳視窗
以上就是今天分享的 **SweetAlert2** 三種撰寫方式給大家參考！
Sign in with Wallet
Connect another wallet