vue3在setup中如何自定义提示框并且三秒之后消失

可以使用Vue3的`ref`和`reactive`函数创建一个提示框组件，并在`setup`函数中使用`setTimeout`函数来控制提示框的显示和隐藏。

以下是示例代码：

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

<script>
import { ref, reactive, onMounted } from 'vue'

export default {
  setup() {
    const alert = reactive({
      show: false,
      message: '',
    })

    const showAlert = (message) => {
      alert.message = message
      alert.show = true

      setTimeout(() => {
        alert.show = false
      }, 3000)
    }

    return {
      show: alert.show,
      message: alert.message,
      showAlert,
    }
  },
}
</script>

在这个示例中，我们使用`ref`函数创建了一个`show`变量，用于控制提示框的显示和隐藏。我们还使用`reactive`函数创建了一个`alert`对象，包含`show`和`message`属性，用于控制提示框的内容。在`showAlert`函数中，我们将提示框的内容设置为传入的`message`参数，将`show`属性设置为`true`，然后使用`setTimeout`函数将`show`属性设置为`false`，从而在三秒之后自动隐藏提示框。

在模板中，我们使用`v-if`指令来根据`show`属性控制提示框的显示和隐藏，并使用`message`属性来显示提示框的内容。在`setup`函数中，我们将`show`, `message`, 和 `showAlert`这三个变量和函数返回，以便在模板中使用。