update Message

Message add closable func, and update params

update Message
Message add closable func, and update params
Aresn
1 parent e9932043
Showing 6 changed files with 97 additions and 17 deletions Show diff stats
examples/routers/message.vue
src/components/base/notification/notice.vue
src/components/base/notification/notification.vue
src/components/message/index.js
src/components/notice/index.js
src/styles/components/message.less
 <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('这是一条成功的提示');
             },
 <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: ''
@@ -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"
@@ -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) {
@@ -71,7 +71,8 @@ function notice (type, options) {
         transitionName: 'move-notice',
         content: content,
         onClose: onClose,
-        closable: true
+        closable: true,
+        type: 'notice'
     });
 }
@@ -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} {