element-ui源码阅读：alert篇

这是alert组件的模板部分

<template>
  <transition name="el-alert-fade">
    <div
      class="el-alert el-alert"
      :class="[typeClass, center ? 'is-center' : '', 'is-' + effect]"
      v-show="visible"
      role="alert"
    >
      <i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
      <div class="el-alert__content">
        <span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title || $slots.title">
          <slot name="title">{{ title }}</slot>
        </span>
        <p class="el-alert__description" v-if="$slots.default && !description"><slot></slot></p>
        <p class="el-alert__description" v-if="description && !$slots.default">{{ description }}</p>
        <i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
      </div>
    </div>
  </transition>
</template>

比较有意思的是description部分

<p class="el-alert__description" v-if="$slots.default && !description"><slot></slot></p>
<p class="el-alert__description" v-if="description && !$slots.default">{{ description }}</p>

props:{
  description: {
    type: String,
    default: ''
  }
}

description部分可以通过props description来传入，也能通过slot方式传入，但只能选择其中一种传入方式来输出描述信息

1.通过slot default 方式描述

<el-alert title="这是成功的标题" type="success">
   <template>这是成功的描述slot</template>
</el-alert>

2.通过props传参方式

<el-alert title="这是成功的标题" type="success" description="这是成功的描述props" />