Merge pull request #1150 from Leopoldthecoder/alert-render

Alert: add render-content, fixed #568

examples/docs/en-US/alert.md

@@ -166,6 +166,7 @@ Description includes a message with more detailed information.
 | **title** | title **REQUIRED** | string | — | — |
 | type | component type | string | success/warning/info/error | info |
 | description | supportive text | string | — | — |
+| render-content | render function for content area, overrides `description` | function(h) | — | — |
 | closable | if closable or not | boolean | — | true |
 | close-text | customized close button text | string | — | — |
 | show-icon | if a type icon is displayed | boolean | — | false |

examples/docs/zh-CN/alert.md

@@ -170,6 +170,7 @@
 | **title** | 标题，**必选参数** | string | — | — |
 | type | 主题 | string | success/warning/info/error | info |
 | description | 辅助性文字 | string | — | — |
+| render-content | 内容区域的渲染函数，会覆盖 `description` | function(h) | — | — |
 | closable | 是否可关闭 | boolean | — | true |
 | close-text | 关闭按钮自定义文本 | string | — | — |
 | show-icon | 是否显示图标 | boolean | — | false |

packages/alert/src/main.vue

@@ -4,7 +4,7 @@
       <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>
-        <p class="el-alert__description" v-if="description">{{ description }}</p>
+        <desc-content></desc-content>
         <i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
       </div>
     </div>
@@ -45,7 +45,8 @@
       showIcon: {
         type: Boolean,
         default: false
-      }
+      },
+      renderContent: Function
     },
 
     data() {
@@ -54,6 +55,21 @@
       };
     },
 
+    components: {
+      descContent: {
+        render(h) {
+          const parent = this.$parent;
+          if (parent.renderContent) {
+            return parent.renderContent(h);
+          } else if (parent.description) {
+            return <p class="el-alert__description">{ parent.description }</p>;
+          } else {
+            return '';
+          }
+        }
+      }
+    },
+
     methods: {
       close() {
         this.visible = false;

test/unit/specs/alert.spec.js

@@ -36,6 +36,35 @@ describe('Alert', () => {
       .to.equal('Unbowed, Unbent, Unbroken');
   });
 
+  it('render-content', () => {
+    vm = createVue({
+      data() {
+        return {
+          text: 'test'
+        };
+      },
+      template: `
+        <div>
+          <el-alert
+            title="test"
+            :render-content="customContent"></el-alert>
+        </div>
+      `,
+      methods: {
+        customContent(h) {
+          return (
+            <p>
+              <el-button class="custom-button">{ this.text }</el-button>
+            </p>
+          );
+        }
+      }
+    }, true);
+    let button = vm.$el.querySelector('.custom-button');
+    expect(button).to.exist;
+    expect(button.textContent).to.equal('test');
+  });
+
   it('close', () => {
     vm = createVue({
       template: `