mirror of https://github.com/ElemeFE/element
Merge pull request #1150 from Leopoldthecoder/alert-render
Alert: add render-content, fixed #568pull/1161/head
commit
7b1b3b4e29
|
@ -166,6 +166,7 @@ Description includes a message with more detailed information.
|
||||||
| **title** | title **REQUIRED** | string | — | — |
|
| **title** | title **REQUIRED** | string | — | — |
|
||||||
| type | component type | string | success/warning/info/error | info |
|
| type | component type | string | success/warning/info/error | info |
|
||||||
| description | supportive text | string | — | — |
|
| description | supportive text | string | — | — |
|
||||||
|
| render-content | render function for content area, overrides `description` | function(h) | — | — |
|
||||||
| closable | if closable or not | boolean | — | true |
|
| closable | if closable or not | boolean | — | true |
|
||||||
| close-text | customized close button text | string | — | — |
|
| close-text | customized close button text | string | — | — |
|
||||||
| show-icon | if a type icon is displayed | boolean | — | false |
|
| show-icon | if a type icon is displayed | boolean | — | false |
|
||||||
|
|
|
@ -170,6 +170,7 @@
|
||||||
| **title** | 标题,**必选参数** | string | — | — |
|
| **title** | 标题,**必选参数** | string | — | — |
|
||||||
| type | 主题 | string | success/warning/info/error | info |
|
| type | 主题 | string | success/warning/info/error | info |
|
||||||
| description | 辅助性文字 | string | — | — |
|
| description | 辅助性文字 | string | — | — |
|
||||||
|
| render-content | 内容区域的渲染函数,会覆盖 `description` | function(h) | — | — |
|
||||||
| closable | 是否可关闭 | boolean | — | true |
|
| closable | 是否可关闭 | boolean | — | true |
|
||||||
| close-text | 关闭按钮自定义文本 | string | — | — |
|
| close-text | 关闭按钮自定义文本 | string | — | — |
|
||||||
| show-icon | 是否显示图标 | boolean | — | false |
|
| show-icon | 是否显示图标 | boolean | — | false |
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
|
<i class="el-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
|
||||||
<div class="el-alert__content">
|
<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">{{ 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>
|
<i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -45,7 +45,8 @@
|
||||||
showIcon: {
|
showIcon: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
}
|
},
|
||||||
|
renderContent: Function
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
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: {
|
methods: {
|
||||||
close() {
|
close() {
|
||||||
this.visible = false;
|
this.visible = false;
|
||||||
|
|
|
@ -36,6 +36,35 @@ describe('Alert', () => {
|
||||||
.to.equal('Unbowed, Unbent, Unbroken');
|
.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', () => {
|
it('close', () => {
|
||||||
vm = createVue({
|
vm = createVue({
|
||||||
template: `
|
template: `
|
||||||
|
|
Loading…
Reference in New Issue