在element-ui中，Alert组件如何实现？让我们一起探索其源码！

2023-11-19 01:22:39

组件的基本结构

<template>
  <div class="el-alert" :class="['el-alert--' + type, 'el-alert--' + effect, sizeClass]" role="alert">
    <i v-if="showIcon" :class="['el-alert__icon', iconClass]" aria-hidden="true"></i>
    <div class="el-alert__content">
      <slot>{{ content }}</slot>
    </div>
    <button v-if="closable" type="button" class="el-alert__close" @click="close">
      <span aria-hidden="true">×</span>
    </button>
  </div>
</template>

从Alert组件的模板代码中，我们可以看到它主要由以下几个部分组成：

外层容器div，用于包裹整个组件。
图标元素i，用于显示提示信息的图标。
内容容器div，用于包裹提示信息的内容。
关闭按钮button，用于关闭提示信息。

组件的Props

Alert组件提供了丰富的Props，可以让我们灵活地配置组件的外观和行为。其中，比较重要的Props有：

type：提示信息的类型，可以是success、warning、info或error。
effect：提示信息的显示效果，可以是light、dark或plain。
closable：是否允许关闭提示信息。
showIcon：是否显示提示信息的图标。
iconClass：提示信息图标的样式类。
content：提示信息的内容。

组件的Events

Alert组件提供了以下Events，可以让我们在组件发生特定事件时执行相应的操作：

close：当提示信息被关闭时触发。

组件的Slot

Alert组件提供了以下Slot：

default：用于自定义提示信息的内容。

组件的使用示例

<el-alert type="success" :closable="true">
  操作成功！
</el-alert>

<el-alert type="warning" :effect="dark" :closable="true" icon="el-icon-warning">
  系统出现异常，请稍后再试！
</el-alert>

<el-alert type="info" :title="自定义标题">
  自定义标题的提示信息。
  <div slot="extra">额外的内容</div>
</el-alert>