From e0bd31a64c8ea0452dba1c3e6b4f9a40594f587a Mon Sep 17 00:00:00 2001
From: Aresn <admin@aresn.com>
Date: Wed, 31 May 2017 15:49:41 +0800
Subject: [PATCH] update Message

Message add closable func, and update params
---
 examples/routers/message.vue                  | 12 ++++
 src/components/base/notification/notice.vue   | 21 +++++--
 .../base/notification/notification.vue        |  1 +
 src/components/message/index.js               | 56 +++++++++++++++----
 src/components/notice/index.js                |  3 +-
 src/styles/components/message.less            | 21 +++++++
 6 files changed, 97 insertions(+), 17 deletions(-)

diff --git a/examples/routers/message.vue b/examples/routers/message.vue
index 4ff90ec4..19644db9 100644
--- a/examples/routers/message.vue
+++ b/examples/routers/message.vue
@@ -1,5 +1,6 @@
 <template>
     <div>
+        <i-button @click.native="info">显示普通提示</i-button>
         <i-button @click.native="success">显示成功提示</i-button>
         <i-button @click.native="warning">显示警告提示</i-button>
         <i-button @click.native="error">显示错误提示</i-button>
@@ -9,6 +10,17 @@
 <script>
     export default {
         methods: {
+            info () {
+//                this.$Message.info('这是一条普通提示');
+                this.$Message.success({
+                    content: '这是一条普通提示2',
+                    duration: 500,
+                    onClose () {
+                        console.log(123)
+                    },
+                    closable: true
+                })
+            },
             success () {
                 this.$Message.success('这是一条成功的提示');
             },
diff --git a/src/components/base/notification/notice.vue b/src/components/base/notification/notice.vue
index dfa0c652..bec1f2fe 100644
--- a/src/components/base/notification/notice.vue
+++ b/src/components/base/notification/notice.vue
@@ -1,10 +1,20 @@
 <template>
     <transition :name="transitionName">
         <div :class="classes" :style="styles">
-            <div :class="[baseClass + '-content']" ref="content" v-html="content"></div>
-            <a :class="[baseClass + '-close']" @click="close" v-if="closable">
-                <i class="ivu-icon ivu-icon-ios-close-empty"></i>
-            </a>
+            <template v-if="type === 'notice'">
+                <div :class="[baseClass + '-content']" ref="content" v-html="content"></div>
+                <a :class="[baseClass + '-close']" @click="close" v-if="closable">
+                    <i class="ivu-icon ivu-icon-ios-close-empty"></i>
+                </a>
+            </template>
+            <template v-if="type === 'message'">
+                <div :class="[baseClass + '-content']" ref="content">
+                    <div :class="[baseClass + '-content-text']" v-html="content"></div>
+                    <a :class="[baseClass + '-close']" @click="close" v-if="closable">
+                        <i class="ivu-icon ivu-icon-ios-close-empty"></i>
+                    </a>
+                </div>
+            </template>
         </div>
     </transition>
 </template>
@@ -19,6 +29,9 @@
                 type: Number,
                 default: 1.5
             },
+            type: {
+                type: String
+            },
             content: {
                 type: String,
                 default: ''
diff --git a/src/components/base/notification/notification.vue b/src/components/base/notification/notification.vue
index 9695b55e..f3750f6b 100644
--- a/src/components/base/notification/notification.vue
+++ b/src/components/base/notification/notification.vue
@@ -5,6 +5,7 @@
             :key="notice.name"
             :prefix-cls="prefixCls"
             :styles="notice.styles"
+            :type="notice.type"
             :content="notice.content"
             :duration="notice.duration"
             :closable="notice.closable"
diff --git a/src/components/message/index.js b/src/components/message/index.js
index 3b9847ed..60d012b1 100644
--- a/src/components/message/index.js
+++ b/src/components/message/index.js
@@ -28,7 +28,7 @@ function getMessageInstance () {
     return messageInstance;
 }
 
-function notice (content, duration = defaultDuration, type, onClose) {
+function notice (content = '', duration = defaultDuration, type, onClose = function () {}, closable = false) {
     if (!onClose) {
         onClose = function () {
 
@@ -52,7 +52,9 @@ function notice (content, duration = defaultDuration, type, onClose) {
                 <span>${content}</span>
             </div>
         `,
-        onClose: onClose
+        onClose: onClose,
+        closable: closable,
+        type: 'message'
     });
 
     // 用于手动消除
@@ -66,20 +68,50 @@ function notice (content, duration = defaultDuration, type, onClose) {
 }
 
 export default {
-    info (content, duration, onClose) {
-        return notice(content, duration, 'info', onClose);
+    info (options) {
+        const type = typeof options;
+        if (type === 'string') {
+            options = {
+                content: options
+            };
+        }
+        return notice(options.content, options.duration, 'info', options.onClose, options.closable);
     },
-    success (content, duration, onClose) {
-        return notice(content, duration, 'success', onClose);
+    success (options) {
+        const type = typeof options;
+        if (type === 'string') {
+            options = {
+                content: options
+            };
+        }
+        return notice(options.content, options.duration, 'success', options.onClose, options.closable);
     },
-    warning (content, duration, onClose) {
-        return notice(content, duration, 'warning', onClose);
+    warning (options) {
+        const type = typeof options;
+        if (type === 'string') {
+            options = {
+                content: options
+            };
+        }
+        return notice(options.content, options.duration, 'warning', options.onClose, options.closable);
     },
-    error (content, duration, onClose) {
-        return notice(content, duration, 'error', onClose);
+    error (options) {
+        const type = typeof options;
+        if (type === 'string') {
+            options = {
+                content: options
+            };
+        }
+        return notice(options.content, options.duration, 'error', options.onClose, options.closable);
     },
-    loading (content, duration, onClose) {
-        return notice(content, duration, 'loading', onClose);
+    loading (options) {
+        const type = typeof options;
+        if (type === 'string') {
+            options = {
+                content: options
+            };
+        }
+        return notice(options.content, options.duration, 'loading', options.onClose, options.closable);
     },
     config (options) {
         if (options.top) {
diff --git a/src/components/notice/index.js b/src/components/notice/index.js
index 13927748..d6104d60 100644
--- a/src/components/notice/index.js
+++ b/src/components/notice/index.js
@@ -71,7 +71,8 @@ function notice (type, options) {
         transitionName: 'move-notice',
         content: content,
         onClose: onClose,
-        closable: true
+        closable: true,
+        type: 'notice'
     });
 }
 
diff --git a/src/styles/components/message.less b/src/styles/components/message.less
index 7196d63b..6e706f12 100644
--- a/src/styles/components/message.less
+++ b/src/styles/components/message.less
@@ -14,6 +14,18 @@
         vertical-align: middle;
         position: absolute;
         left: 50%;
+
+        &-close {
+            position: absolute;
+            right: 4px;
+            top: 9px;
+            color: #999;
+            outline: none;
+
+            i.@{icon-prefix-cls}{
+                .close-base(-3px);
+            }
+        }
     }
 
     &-notice-content {
@@ -25,6 +37,15 @@
         box-shadow: @shadow-base;
         background: #fff;
         display: block;
+        &-text{
+            display: inline-block;
+        }
+    }
+
+    &-notice-closable{
+        .@{message-prefix-cls}-notice-content-text{
+            padding-right: 32px;
+        }
     }
 
     &-success .@{icon-prefix-cls} {