请用vue写一个toast

以下是一个简单的Vue toast组件，可以用来在页面上显示一个简单的toast通知：

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

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

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

使用方法：

在需要使用toast的组件中引入此组件，例如在App.vue中引入：

<template>
  <div>
    <router-view />
    <Toast />
  </div>
</template>

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

export default {
  components: {
    Toast
  }
}
</script>

在需要弹出toast的地方调用showToast方法，例如在某个button的click事件中：

<template>
  <button @click="showToast">点击弹出toast</button>
</template>

<script>
export default {
  methods: {
    showToast() {
      this.$root.$emit('showToast', 'Hello, Vue!', 3000);
    }
  }
}
</script>

这样就可以在页面上显示一个简单的toast通知了。