$Message support background prop

This commit is contained in:
梁灏 2019-09-06 10:05:57 +08:00
parent 6503055954
commit ec3eea6803
3 changed files with 54 additions and 2 deletions

View file

@ -17,6 +17,21 @@
duration: 1000,
background: true
});
this.$Message.success({
content: '这是一条普通的提示',
duration: 1000,
background: true
});
this.$Message.warning({
content: '这是一条普通的提示',
duration: 1000,
background: true
});
this.$Message.error({
content: '这是一条普通的提示',
duration: 1000,
background: true
});
},
success () {
this.$Message.success('This is a success tip');

View file

@ -13,7 +13,7 @@
</a>
</template>
<template v-if="type === 'message'">
<div :class="[baseClass + '-content']" ref="content">
<div :class="messageContentClasses" ref="content">
<div :class="[baseClass + '-content-text']" v-html="content"></div>
<div :class="[baseClass + '-content-text']">
<render-cell
@ -117,6 +117,15 @@
this.render !== undefined ? `${this.baseClass}-content-with-render` : ''
];
},
messageContentClasses () {
return [
`${this.baseClass}-content`,
{
[`${this.baseClass}-content-${this.msgType}`]: this.msgType,
[`${this.baseClass}-content-background`]: this.background
}
];
},
contentWithIcon () {
return [
this.withIcon ? `${this.prefixCls}-content-with-icon` : '',

View file

@ -79,4 +79,32 @@
vertical-align: middle;
}
}
}
&-notice-with-background{
.@{message-prefix-cls}-notice-content{
&-background{
box-shadow: none;
}
&-info{
background: ~`colorPalette("@{primary-color}", 1)`;
color: ~`colorPalette("@{primary-color}", 6)`;
border: 1px solid ~`colorPalette("@{primary-color}", 2)`;
}
&-success{
background: ~`colorPalette("@{success-color}", 1)`;
color: ~`colorPalette("@{success-color}", 6)`;
border: 1px solid ~`colorPalette("@{success-color}", 2)`;
}
&-warning{
background: ~`colorPalette("@{warning-color}", 1)`;
color: ~`colorPalette("@{warning-color}", 6)`;
border: 1px solid ~`colorPalette("@{warning-color}", 2)`;
}
&-error{
background: ~`colorPalette("@{error-color}", 1)`;
color: ~`colorPalette("@{error-color}", 6)`;
border: 1px solid ~`colorPalette("@{error-color}", 2)`;
}
}
}
}