在vue的setup中实现一个消息队列用于多个按钮点击时触发显示页面顶部反馈提示的tips

可以通过使用Vue的响应式数据来实现一个消息队列，具体实现如下：

import { reactive, toRefs } from 'vue'

export default function useMessageQueue() {
  const state = reactive({
    messages: []
  })

  const addMessage = (msg) => {
    state.messages.push(msg)
  }

  const removeMessage = () => {
    state.messages.shift()
  }

  return {
    ...toRefs(state),
    addMessage,
    removeMessage
  }
}

以上代码定义了一个名为`useMessageQueue`的自定义hook，该hook返回一个响应式数据对象`state`和两个方法`addMessage`和`removeMessage`。`state`中包含一个数组`messages`，用于保存消息队列中的消息。`addMessage`方法用于向消息队列中添加消息，`removeMessage`方法用于从消息队列中移除消息。

在具体使用中，可以在每个按钮的点击事件中调用`addMessage`方法向消息队列中添加一个消息，如下所示：

import { useMessageQueue } from '@/hooks'

export default {
  setup() {
    const { messages, addMessage, removeMessage } = useMessageQueue()

    const handleClick1 = () => {
      addMessage('Button 1 clicked!')
    }

    const handleClick2 = () => {
      addMessage('Button 2 clicked!')
    }

    return {
      messages,
      handleClick1,
      handleClick2
    }
  }
}

以上代码中，通过`useMessageQueue`自定义hook获取了消息队列相关的响应式数据和方法。在按钮的点击事件中，通过调用`addMessage`方法向消息队列中添加了相应的消息。在模板中，可以通过`v-for`指令遍历`messages`数组，并将每个消息渲染为一个提示框，如下所示：

<template>
  <div>
    <button @click="handleClick1">Button 1</button>
    <button @click="handleClick2">Button 2</button>
    <div v-for="(msg, index) in messages" :key="index">
      <div>{{ msg }}</div>
      <button @click="removeMessage">Close</button>
    </div>
  </div>
</template>

以上代码中，提示框的内容为`msg`，并且每个提示框都有一个关闭按钮，点击该按钮可以调用`removeMessage`方法移除对应的消息。