在vue3中MessageBox顶部如何设置

在Vue3中，可以使用全局的提醒框组件来实现类似于MessageBox的效果。你可以在应用的入口文件中，通过createApp()方法创建Vue实例，并全局注册一个名为“notification”的组件，用于展示提醒信息：

import { createApp } from 'vue'
import App from './App.vue'
import Notification from './components/Notification.vue'

const app = createApp(App)

app.component('notification', Notification)

app.mount('#app')

然后，在需要展示提醒信息的组件中，你可以通过在模板中使用<notification>标签来调用这个组件，并且通过props向组件传递需要展示的信息：

<template>
  <div>
    <button @click="showMessage">显示提醒信息</button>
    <notification v-if="message" :type="type">{{ message }}</notification>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      type: ''
    }
  },
  methods: {
    showMessage() {
      this.message = '这是一条提醒信息'
      this.type = 'success'
    }
  }
}
</script>

在Notification组件中，你可以使用Vue3提供的组合API来实现这个组件的逻辑。例如，你可以使用ref创建一个指向组件根元素的引用，并且使用watchEffect监听type的变化，然后根据type的值来设置组件的样式：

<template>
  <div ref="notification" :class="['notification', type]">
    {{ message }}
  </div>
</template>

<script>
import { ref, watchEffect } from 'vue'

export default {
  props: {
    message: String,
    type: String
  },
  setup(props) {
    const notification = ref(null)

    watchEffect(() => {
      if (props.type === 'success') {
        notification.value.style.backgroundColor = '#57d57f'
      } else if (props.type === 'error') {
        notification.value.style.backgroundColor = '#f44336'
      } else {
        notification.value.style.backgroundColor = '#4caf50'
      }
    })

    return { notification }
  }
}
</script>

<style>
.notification {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 16px;
  font-size: 16px;
  text-align: center;
  color: #fff;
  transition: top 0.3s ease;
}

.notification.success {
  background-color: #57d57f;
}

.notification.error {
  background-color: #f44336;
}
</style>

在上面的代码中，我们使用了:class指令来动态设置组件的样式，并且使用了transition属性来添加动画效果。当type的值发生变化时，组件根元素的样式也会随之改变。

当你在组件中调用<notification>标签并传递message和type属性时，就可以展示类似于MessageBox的效果了。你可以根据需要修改样式或添加其他功能，例如自动关闭等。