在 Vue 3 中创建自定义 Toast 弹窗，提升用户体验

前端

2023-09-02 08:00:24

在 Vue 3 中创建自定义 Toast 弹窗

前言

在现代 Web 开发中，toast 弹窗已成为显示重要消息和通知的常用元素。它们轻巧、不引人注目，并且可以轻松融入任何用户界面。本文将指导您在 Vue 3 中实现一个功能强大且可定制的自定义 toast 弹窗。

技术要求

要遵循本教程，您需要：

Vue 3 知识
基本 HTML 和 CSS 技能
喜欢的文本编辑器或 IDE

步骤 1：设置 Vue 项目

创建一个新的 Vue 项目或在现有项目中使用以下命令安装 Vue 3：

npm install -g @vue/cli
vue create my-toast-app

步骤 2：创建 Toast 组件

在 src/components 目录中，创建一个名为 Toast.vue 的新组件文件。添加以下代码：

<template>
  <transition name="toast-fade">
    <div class="toast" v-if="isVisible">
      <slot></slot>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'Toast',
  props: {
    isVisible: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.toast {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  padding: 1rem;
  background-color: #333;
  color: #fff;
  border-radius: 5px;
  z-index: 9999;
}

.toast-fade-enter-active {
  transition: opacity 0.3s ease-in;
}

.toast-fade-leave-active {
  transition: opacity 0.3s ease-out;
}

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

步骤 3：创建 Toast 服务

在 src 目录中，创建一个名为 toast.js 的新文件。添加以下代码：

import { ref } from 'vue'

export default function useToast() {
  const isVisible = ref(false)
  const message = ref('')

  const showToast = (msg) => {
    message.value = msg
    isVisible.value = true
    setTimeout(() => {
      isVisible.value = false
    }, 3000)
  }

  return {
    isVisible,
    showToast
  }
}

步骤 4：在 App 组件中使用 Toast 服务

在 src/App.vue 中，导入 toast.js 并将其注册为一个全局组件：

import { createApp } from 'vue'
import Toast from './components/Toast.vue'
import useToast from './toast'

const app = createApp({
  components: { Toast },
  setup() {
    const { isVisible, showToast } = useToast()

    return { isVisible, showToast }
  }
})

app.mount('#app')

步骤 5：在模板中使用 Toast 弹窗

在 App.vue 中，在模板中添加以下代码：

<template>
  <div id="app">
    <button @click="showToast('Hello, Vue 3!')">显示 Toast</button>
    <Toast v-if="isVisible">{{ message }}</Toast>
  </div>
</template>