# 🏅Day15 - Vue.js 通知元件製作

## Bootstrap 5 通知元件（Toast

Bootstrap 5 的 Toast 是一種小巧的彈出式通知框，用來顯示系統或應用程式的即時提示、成功訊息、錯誤警告等。它可以自動消失，也可以由使用者手動關閉。

例如以下範例：<iframe height="300" style="width: 100%;" scrolling="no" title="通知元件製作" src="https://codepen.io/yen-kg/embed/dPYObLm?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/dPYObLm">
通知元件製作</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 題目
請複製此 [CodePen 模板](https://codepen.io/yen-kg/pen/ByoQBge?editors=1010)，並且完成 addToCart 中的內容：
* 點擊加入購物車按鈕時能夠正確地跳出通知。

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
https://codepen.io/yen-kg/pen/empBOPz?editors=0010
-->

回報區
---

| Discord | CodePen / 答案 |
|:----------:|:-------------------------------------------------------------------:|
| thchen2002 | [CodePen](https://codepen.io/thchen2002/pen/JoYLqgE) |
| dPi | [CodePen](https://codepen.io/snijqlte-the-bold/pen/empMwbW) |
| Candace | [CodePen](https://codepen.io/Candace802/pen/yyYKdwV?editors=1010) |
| 登登登 | [CodePen](https://codepen.io/Duncanin/pen/empMqOE) |
| RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/YPyLKyq?editors=1010) |
| 地瓜 | [CodePen](https://codepen.io/huangtzuchin/pen/RNWybYZ?editors=1010) |
| 阿鵝 | [CodePen](https://codepen.io/noracami/pen/LEpmPMb) |
| Lin | [CodePen](https://codepen.io/Lin4611/pen/Byoxyyy?editors=1010) |
| yu005620 | [CodePen](https://codepen.io/yu-chin-chiang/pen/LEpmEpg?editors=1010) |
| poyi | [CodePen](https://codepen.io/poyi-the-flexboxer/pen/ZYboEvO?editors=1010) |
| Sam.S.T.Y | [CodePen](https://codepen.io/Sam-Yang-the-animator/pen/EaVLVZZ?editors=1010) |
Dean | [CodePen](https://codepen.io/ch933114/pen/qEOYXvG?editors=1010) |
|DaRon | [CodePen](https://codepen.io/daron0811/pen/qEOYVqm) |
|wei_0982 | [CodePen](https://codepen.io/nico-lai/pen/PwPeRMv) |
| haohaoliao | [CodePen](https://codepen.io/yuyuyuhaohao/pen/LEpmmao?editors=1010) |
| 阿昌 | [CodePen](https://codepen.io/ychleo102615/pen/LEpmJqv) |
| Loder | [CodePen](https://codepen.io/rgbkomhs-the-flexboxer/pen/RNWyeqV?editors=1010) |
| 阿Kai | [CodePen](https://codepen.io/kaihuang3013/pen/VYvxEqP?editors=1010) |
| 7lun | [CodePen](https://codepen.io/mfyvqhsn-the-bold/pen/xbwjmoM) |
| Rexlin| [CodePen](https://codepen.io/Rexlin595/pen/myeLNvy) |
| 牙山 | [CodePen](https://codepen.io/Tzuru-Chen/pen/OPyEPXK) |
| David0799 | [CodePen](https://codepen.io/David0799/pen/OPyQMWp) |
| 白雪 | [CodePen](https://codepen.io/weiwei032835-the-styleful/pen/PwPamoN?editors=0010) |
| 地呱 | [Codepen](https://codepen.io/LHung/pen/NPGzgJZ?editors=1010) |
| Allen_Lin | [CodePen](https://codepen.io/lcf7891/pen/XJmYaGq?editors=1010) |
| William Hsieh | [CodePen](https://codepen.io/lsaimqxa-the-vuer/pen/XJmYeKx?editors=1010) |
| Clarence | [CodePen](https://codepen.io/Clarence-Lin/pen/XJmYqZz?editors=1010) |
| Clove_墨 | [StackBlitz](https://stackblitz.com/edit/vitejs-vite-yvpdgk4n?embed=1&file=src%2FApp.vue&hideNavigation=1) |
| 叮咚 | [CodePen](https://codepen.io/pinchieh-lin/pen/xbwJRev?editors=1010) |
| Momoze | [CodePen](https://codepen.io/mleczmam-the-typescripter/pen/zxvLoeX) |
| ScarT | [CodePen](https://codepen.io/Acadia/pen/JoYBxMx?editors=0010) |
| jimmy | [CodePen](https://codepen.io/JimmyMao/pen/ZYbqOEo?editors=1010) |
| 黛西 | [CodePen](https://codepen.io/ChiashengLin/pen/QwjZVWV) |
| Chen | [CodePen](https://codepen.io/JGM-C/pen/ZYbqqYO?editors=1010) |
| Toung | [CodePen](https://codepen.io/Toung/pen/xbwmxJM) |
<!--

| user | [CodePen]() |

-->