写一个vue提示框组件

好的，以下是一个简单的 Vue 提示框组件的代码示例：

<template>
  <div v-if="show" class="alert" :class="type">
    <span class="close" @click="close">&times;</span>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: 'info'
    },
    message: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      show: true
    }
  },
  methods: {
    close() {
      this.show = false
    }
  }
}
</script>

<style>
.alert {
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 15px;
}

.alert p {
  margin: 0;
}

.alert.info {
  background-color: #2196F3;
  color: white;
}

.alert.success {
  background-color: #4CAF50;
  color: white;
}

.alert.warning {
  background-color: #FF9800;
  color: white;
}

.alert.danger {
  background-color: #f44336;
  color: white;
}

.close {
  float: right;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}
</style>

这个组件可以接受两个 props：type 和 message。type 表示提示框的类型，可以是 info、success、warning 或 danger，分别对应不同的颜色和图标。message 表示提示框的内容，必须是一个字符串。

当用户点击提示框上的关闭按钮时，提示框会消失。