Vue3 从零开始 - 实战：打造 Toast 弹窗组件

前言

在《Vue3 从零开始》系列实战教程中，我们已经完成了登录、注册和模拟接口请求的功能。为了提升用户体验，我们将在本篇教程中深入探讨如何构建一个 Toast 弹窗组件。Toast 弹窗是一种轻量级的通知机制，常用于在不中断用户当前任务的情况下提供简短反馈或消息。

实战教程

1. 安装依赖

npm install vue-toastification --save

2. 引入组件

在 main.js 文件中引入 Toast 组件：

import Vue from 'vue'
import VueToastification from 'vue-toastification'
import 'vue-toastification/dist/index.css'

Vue.use(VueToastification)

3. 创建 Toast 组件

我们创建一个单独的 Toast 组件，以便在需要时重用它：

<template>
  <div class="toast-container">
    <transition name="fade">
      <div class="toast" v-if="show">
        <p>{{ message }}</p>
        <button @click="show = false">关闭</button>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'Toast',
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      show: true
    }
  }
}
</script>

<style>
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}

.toast {
  padding: 16px;
  background: #3498db;
  color: #fff;
  border-radius: 5px;
}

.toast button {
  float: right;
  border: none;
  background: none;
  color: #fff;
  cursor: pointer;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

4. 在组件中使用 Toast

现在，我们可以通过 $toast API 在任意组件中使用 Toast：

this.$toast.open({
  message: '操作成功'
})

进阶功能

除了基本功能之外，我们还可以添加一些进阶功能：

• 自动关闭： 设置一个超时，让 Toast 在一段时间后自动关闭。
• 自定义样式： 通过 CSS 轻松自定义 Toast 的外观。
• 不同类型： 支持不同类型的 Toast，如 success、error、info 等。

结语

通过本教程，我们成功地构建了一个功能强大的 Toast 弹窗组件。这个组件可以帮助我们在不中断用户当前任务的情况下提供简短反馈或消息。通过结合进阶功能，我们还能进一步增强用户体验。