vue3中toast提示代码

在 Vue3 中，使用第三方库如 Vuetify 或 Element Plus 来实现 toast 提示是一种常见的做法。以下是使用 Element Plus 的简单示例：

<template>
  <el-button @click="showToast">点击显示 Toast</el-button>
  <el-dialog v-model="dialogVisible" title="提示信息">
    <p>{{ message }}</p>
    <el-button @click="closeDialog">关闭</el-button>
  </el-dialog>
</template>

<script>
import { useElMessage } from 'element-plus';

export default {
  data() {
    return {
      dialogVisible: false,
      message: ''
    };
  },
  methods: {
    showToast() {
      this.message = '这是一个提示消息';
      this.dialogVisible = true;
    },
    closeDialog() {
      this.message = '';
      this.dialogVisible = false;
    }
  },
  setup() {
    const { emit } = defineEmits(['update:dialogVisible', 'message']);
    useElMessage({
      show(message) {
        emit('message', message);
        this.showToast();
      },
      close() {
        emit('update:dialogVisible', false);
      }
    });
    return {};
  }
};
</script>

在这个例子中，我们创建了一个按钮，当用户点击时会调用 `showToast` 方法。这个方法更新了 message 数据并设置对话框可见。`useElMessage` 是 Element Plus 提供的组件内插件，它监听消息的展示和关闭，并通过 emits 自定义事件通知组件状态的变化。

如果你选择使用其他库，代码可能会有所不同，但基本思路是利用通知系统或者自定义指令来控制 toast 的显示和隐藏。