<template>
  <div class="kole-alert kole-alert-alert" :class="'is-' + type" role="alert"><span><strong>{{ title }}</strong><br /><span class="kole-alert-desc">{{ description }}</span></span><button v-if="closable" class="kole-alert-close" type="button" aria-label="关闭" @click="$emit('close')">×</button></div>
</template>

<script>
export default {
  name: 'KoleAlert',
  props: {
    type: { type: String, default: 'info' }, // 类型
    title: { type: String, default: '系统提示' }, // 标题
    description: { type: String, default: '请检查当前配置后继续。' }, // 描述文本
    closable: { type: Boolean, default: true }, // 是否可关闭
  },
  // events: close
};
</script>

<style src="./Alert.css"></style>
