Vue3 实现一个自定义toast 小弹窗功能

Vue3 实现一个自定义toast 小弹窗功能的攻略如下：

1. 创建组件

首先，在 Vue3 中创建组件有两种方式：使用 defineComponent 或 defineAsyncComponent 函数。这里以 defineComponent 函数为例，创建一个名为 Toast 的弹窗组件。

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Toast',
  props: {
    message: String,
    duration: {
      type: Number,
      default: 2000
    }
  },
  data() {
    return {
      show: false
    }
  },
  methods: {
    showToast() {
      this.show = true;
      setTimeout(() => {
        this.show = false;
      }, this.duration);
    }
  },
  template: `
    <div v-if="show">
      {{ message }}
    </div>
  `
});

在这里，我们定义了两个属性：message 和 duration，分别表示 Toast 的文本和持续时间。同时，我们使用了一个 show 数据来控制 Toast 是否显示。在 showToast 方法中，我们通过设置 show 数据和 setTimeout 函数来控制 Toast 的显示与隐藏。

2. 注册组件

接下来，我们需要将组件注册到 Vue3 中。在 Vue3 中，我们可以通过 app.component 函数实现组件的注册。在 main.js 文件中，添加如下代码：

import { createApp } from 'vue';
import App from './App.vue';
import Toast from './components/Toast.vue';

const app = createApp(App);

app.component('toast', Toast);

app.mount('#app');

在这里，我们通过 app.component 函数将 Toast 组件注册到应用中。注册后，我们可以在模板中通过 <toast></toast> 标签引入该组件。

3. 使用组件

现在，我们可以在应用中使用 Toast 组件了。在需要显示 Toast 的地方，我们可以通过以下代码使用：

<template>
  <button @click="showToast()">显示 Toast</button>
  <toast :message="message" :duration="duration"></toast>
</template>

<script>
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'App',
  data() {
    return {
      message: 'Hello World!',
      duration: 2000,
    }
  },
  methods: {
    showToast() {
      this.$refs.toast.showToast();
    }
  }
});
</script>

在这里，我们首先定义了一个按钮，当用户点击该按钮时，会触发 showToast 方法。在 showToast 方法中，我们通过 $refs 来获取 Toast 组件的实例，并调用其 showToast 方法来显示 Toast。我们也可以通过传入 message 和 duration 属性来控制 Toast 的文本和显示时长。

通过以上步骤，我们就可以在 Vue3 中实现自定义 Toast 弹窗功能了。