$Message support background prop

examples/routers/message.vue

@@ -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');

src/components/base/notification/notice.vue

@@ -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` : '',

src/styles/components/message.less

@@ -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)`;
+            }
+        }
+    }
+}