From 31d31d904ddaf267951af63f9a537f07cd1dbfdb Mon Sep 17 00:00:00 2001
From: Wenlu Wang <kingwenlu@gmail.com>
Date: Sat, 20 Oct 2018 11:51:36 +0800
Subject: [PATCH] Alert: add support for title slot (#13082)

* Alert: add support for title slot

* update documents
---
 examples/docs/en-US/alert.md  |  5 +++++
 examples/docs/es/alert.md     |  5 +++++
 examples/docs/zh-CN/alert.md  |  5 +++++
 packages/alert/src/main.vue   |  4 +++-
 test/unit/specs/alert.spec.js | 10 ++++++++++
 5 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/examples/docs/en-US/alert.md b/examples/docs/en-US/alert.md
index b8034a85b..cd1583baf 100644
--- a/examples/docs/en-US/alert.md
+++ b/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 |
diff --git a/examples/docs/es/alert.md b/examples/docs/es/alert.md
index c8c4ed4be..76e6124ea 100644
--- a/examples/docs/es/alert.md
+++ b/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 |
diff --git a/examples/docs/zh-CN/alert.md b/examples/docs/zh-CN/alert.md
index 45c6b325e..e64e9789f 100644
--- a/examples/docs/zh-CN/alert.md
+++ b/examples/docs/zh-CN/alert.md
@@ -210,6 +210,11 @@
 | close-text | 关闭按钮自定义文本 | string | — | — |
 | show-icon | 是否显示图标 | boolean | — | false |
 
+### Slot
+
+| Name | Description |
+|------|--------|
+| title | 标题的内容 |
 
 ### Events
 | 事件名称 | 说明 | 回调参数 |
diff --git a/packages/alert/src/main.vue b/packages/alert/src/main.vue
index 30eb620b2..20a529a7d 100644
--- a/packages/alert/src/main.vue
+++ b/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>
diff --git a/test/unit/specs/alert.spec.js b/test/unit/specs/alert.spec.js
index 502cca25a..ee72483b8 100644
--- a/test/unit/specs/alert.spec.js
+++ b/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: `