vue编写aler组件

好的，下面是使用Vue编写一个alert组件的代码：

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

<script>
export default {
  name: 'Alert',
  props: {
    message: String,
    duration: {
      type: Number,
      default: 3000
    }
  },
  data() {
    return {
      show: true
    }
  },
  created() {
    setTimeout(() => {
      this.show = false
    }, this.duration)
  }
}
</script>

<style>
.alert {
  padding: 10px;
  background-color: #f44336;
  color: #fff;
  border-radius: 3px;
  margin: 10px 0;
}
</style>

这个alert组件接受两个props，分别为message和duration。message是要显示的消息，duration是持续时间，单位为毫秒，默认值为3000毫秒（也就是3秒）。当组件被创建时，会启动一个定时器，经过duration时间后，会将show属性置为false，从而隐藏alert组件。