vue3 showToast

在 Vue 3 中，你可以使用一个插件或者自定义一个全局组件来实现 showToast 的功能。下面是一个示例：

首先，你可以创建一个 `Toast` 组件：

<template>
  <div v-if="show" class="toast">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      message: ''
    };
  },
  methods: {
    showToast(message) {
      this.message = message;
      this.show = true;

      setTimeout(() => {
        this.show = false;
      }, 3000); // 持续显示 3 秒钟
    }
  }
};
</script>

<style scoped>
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 10px;
  border-radius: 4px;
}
</style>

接下来，在你的应用程序的入口文件或者需要使用 showToast 的组件中，注册并使用这个 `Toast` 组件：

<template>
  <div>
    <button @click="showToast('Hello, World!')">显示 Toast</button>
    <Toast ref="toast"></Toast>
  </div>
</template>

<script>
import Toast from './components/Toast.vue';

export default {
  components: {
    Toast
  },
  methods: {
    showToast(message) {
      this.$refs.toast.showToast(message);
    }
  }
};
</script>

这样，当你点击 "显示 Toast" 按钮时，`showToast` 方法将会被调用，然后在 `Toast` 组件中显示消息一段时间后消失。你可以根据需要自定义样式和持续时间。