vue 如何控制自定义toast显示时长、

在 Vue 中控制自定义 toast 显示时长的方法有很，以下是其中一种简单的实现方法：

1. 首先在组件中定义一个计时器变量 `timer`，用于记录 toast 显示的时间，初始值为 0。

2. 在 toast 显示的时候，启动一个计时器，将计时器变量 `timer` 的值设置为显示时长。

3. 在 `mounted()` 生命周期钩子函数中，启动一个定时器，用于监听计时器变量 `timer` 的变化，当 `timer` 的值变为非 0 时，自动隐藏 toast。

4. 在 `beforeDestroy()` 生命周期钩子函数中，清除定时器和计时器变量。

下面是一个示例代码：

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

<script>
export default {
  data() {
    return {
      show: false,
      message: '',
      timer: 0 // 计时器变量
    }
  },
  methods: {
    showToast(message, duration) {
      this.message = message
      this.show = true
      this.timer = duration // 启动计时器
    },
    hideToast() {
      this.show = false
      this.timer = 0 // 计时器变量清零
    }
  },
  mounted() {
    setInterval(() => {
      if (this.timer > 0) {
        this.timer--
      } else {
        this.hideToast() // 自动隐藏 toast
      }
    }, 1000)
  },
  beforeDestroy() {
    clearInterval(this.intervalId)
    this.timer = 0 // 计时器变量清零
  }
}
</script>

在组件中，通过 `showToast()` 方法来显示 toast，第一个参数为要显示的消息，第二个参数为显示时长（单位为秒）。同时，在组件中，我们使用了 `setInterval()` 定时器来监听计时器变量，并在计时器变量 `timer` 的值变为非 0 时隐藏 toast。在组件销毁之前，我们需要清除定时器和计时器变量。