From ec3eea68034852608c5022446a23e0483350601f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Fri, 6 Sep 2019 10:05:57 +0800
Subject: [PATCH] $Message support background prop

---
 examples/routers/message.vue                | 15 +++++++++++
 src/components/base/notification/notice.vue | 11 +++++++-
 src/styles/components/message.less          | 30 ++++++++++++++++++++-
 3 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/examples/routers/message.vue b/examples/routers/message.vue
index 147af6a7..c25f1077 100644
--- a/examples/routers/message.vue
+++ b/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');
diff --git a/src/components/base/notification/notice.vue b/src/components/base/notification/notice.vue
index c7cae0fc..c2f6c266 100644
--- a/src/components/base/notification/notice.vue
+++ b/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` : '',
diff --git a/src/styles/components/message.less b/src/styles/components/message.less
index c186dad8..34e6fe46 100644
--- a/src/styles/components/message.less
+++ b/src/styles/components/message.less
@@ -79,4 +79,32 @@
             vertical-align: middle;
         }
     }
-}
\ No newline at end of file
+
+    &-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)`;
+            }
+        }
+    }
+}