Merge pull request #2056 from Leopoldthecoder/alert-slot

Alert: replace render function with default slot

examples/docs/en-US/alert.md

@@ -165,8 +165,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 | — | — |
+| description | descriptive text. Can also be passed with the default slot | 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

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

packages/alert/src/main.vue

@@ -4,7 +4,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>
-        <desc-content></desc-content>
+        <slot>
+          <p class="el-alert__description" v-if="description">{{ description }}</p>
+        </slot>
         <i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
       </div>
     </div>
@@ -45,8 +47,7 @@
       showIcon: {
         type: Boolean,
         default: false
-      },
+      }
-      renderContent: Function
     },
 
     data() {
@@ -55,21 +56,6 @@
       };
     },
 
-    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,35 +36,6 @@ 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: `