在vue的setup中实现一个消息队列用于多个按钮点击时触发显示页面顶部反馈提示的tips并且每条信息显示3秒后消失

以下是一个简单的实现示例：

import { ref } from 'vue';

export default {
  setup() {
    const messages = ref([]);

    // 添加消息到队列
    const addMessage = (text) => {
      messages.value.push(text);
    };

    // 删除队列中的第一个消息
    const removeMessage = () => {
      messages.value.shift();
    };

    // 自动消失的定时器
    const timer = setInterval(() => {
      if (messages.value.length > 0) {
        removeMessage();
      } else {
        clearInterval(timer);
      }
    }, 3000);

    return {
      messages,
      addMessage
    };
  }
}

在模板中，可以使用`v-for`指令遍历消息队列并渲染每个消息，并在每个按钮的点击事件中调用`addMessage`方法添加消息到队列：

<template>
  <div>
    <button @click="addMessage('Button 1 clicked')">Button 1</button>
    <button @click="addMessage('Button 2 clicked')">Button 2</button>
    <button @click="addMessage('Button 3 clicked')">Button 3</button>
    <div v-for="(message, index) in messages" :key="index" class="tip">{{ message }}</div>
  </div>
</template>

在CSS中，可以设置`.tip`类的样式，使其在顶部居中显示，具体样式根据需要自行调整。

这样，每次点击按钮时，都会将一条消息添加到队列中，每条消息会在3秒后自动消失。如果队列中有多个消息，它们会依次显示和消失，直到队列为空。