Alert: add support for title slot (#13082)

* Alert: add support for title slot

* update documents

examples/docs/en-US/alert.md

@@ -216,6 +216,11 @@ Description includes a message with more detailed information.
 | close-text | customized close button text | string | — | — |
 | show-icon | if a type icon is displayed | boolean | — | false |
 
+### Slot
+
+| Name | Description |
+|------|--------|
+| title | content of the Alert title |
 
 ### Events
 | Event Name | Description | Parameters |

examples/docs/es/alert.md

@@ -218,6 +218,11 @@ Descripción incluye un mensaje con información más detallada.
 | close-text  | texto de cerrado personalizado           | string  | —                          | —           |
 | show-icon   | si un icono del tipo de alerta se debe mostrar | boolean | —                          | false       |
 
+### Slot
+
+| Name | Description |
+|------|--------|
+| title | El contenido del título de alerta. |
 
 ### Eventos
 | Nombre del evento | Descripción                           | Parámetros |

examples/docs/zh-CN/alert.md

@@ -210,6 +210,11 @@
 | close-text | 关闭按钮自定义文本 | string | — | — |
 | show-icon | 是否显示图标 | boolean | — | false |
 
+### Slot
+
+| Name | Description |
+|------|--------|
+| title | 标题的内容 |
 
 ### Events
 | 事件名称 | 说明 | 回调参数 |

packages/alert/src/main.vue

@@ -8,7 +8,9 @@
     >
       <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">{{ title }}</span>
+        <span class="el-alert__title" :class="[ isBoldTitle ]" v-if="title || $slots.title">
+          <slot name="title">{{ title }}</slot>
+        </span>
         <slot>
           <p class="el-alert__description" v-if="description">{{ description }}</p>
         </slot>

test/unit/specs/alert.spec.js

@@ -35,6 +35,16 @@ describe('Alert', () => {
       .to.equal('Unbowed, Unbent, Unbroken');
   });
 
+  it('title slot', () => {
+    vm = createVue(`
+      <el-alert>
+        <span slot="title">foo</span>
+      </el-alert>
+    `);
+
+    expect(vm.$el.querySelector('.el-alert__title').textContent).to.equal('foo');
+  });
+
   it('close', () => {
     vm = createVue({
       template: `