跳至主要内容

Day15 - Vue.js 通知元件製作

備註

本站 Vue 的撰寫風格都是 Composition API

2025 Vue 直播班每日任務，藉由一天學一點積沙成塔

Topic​

  • 接續昨天的 emits 格式，使用 Bootstrap 的 Toast 元件修改 handleAddToCart，達成點擊加入購物車時會跳出 Toast 通知

Result​

App.vue
<script setup>

const toastMessage = ref('');
const toastRef = ref(null);

const handleAddToCart = (fruitTitle) => {
  toastMessage.value = `您已將 ${fruitTitle} 加入購物車`;
  if (toastRef.value) {
    const toast = new bootstrap.Toast(toastRef.value, {
      delay: 2000,
    });
    toast.show();
  }
};
onMounted(() => {
  if (toastRef.value) {
    toastRef.value.addEventListener('hidden.bs.toast', () => {
      toastMessage.value = '';
    });
  }
});
</script>

思考與反饋​

  • 學習如何在 Vue 使用 Toast 元件 ( Modal 或 Offcanvas 寫法也差不多 )
  1. 取得 DOM 元素：const toastRef = ref(null);
  2. 實例元件：const toast = new bootstrap.Toast()
  3. 呼叫顯示或隱藏：toast.show() 或 toast.hide()
  4. 這裡延伸加上了 2 秒後自動關掉 Toast：(toastRef.value, { delay: 2000 })

CODE​