message components bug fixed

message components bug fixed

components/base/notification/index.js

@@ -24,6 +24,9 @@ Notification.newInstance = properties => {
         notice (noticeProps) {
             notification.add(noticeProps);
         },
+        remove (key) {
+            notification.close(key);
+        },
         component: notification,
         destroy () {
             document.body.removeChild(div);

components/base/notification/notification.vue

@@ -63,7 +63,7 @@
         },
         methods: {
             add (notice) {
-                const key = getUuid();
+                const key = notice.key || getUuid();
 
                 let _notice = Object.assign({
                     style: {

components/message/index.js

@@ -2,11 +2,13 @@ import Notification from '../base/notification';
 
 const prefixCls = 'ivu-message';
 const iconPrefixCls = 'ivu-icon';
+const prefixKey = 'ivu_message_key_';
 
 let defaultDuration = 1.5;
 
 let top;
 let messageInstance;
+let key = 1;
 
 const iconTypes = {
     'info': 'information-circled',
@@ -42,6 +44,7 @@ function notice (content, duration = defaultDuration, type, onClose) {
     let instance = getMessageInstance();
 
     instance.notice({
+        key: `${prefixKey}${key}`,
         duration: duration,
         style: {},
         content: `
@@ -52,6 +55,15 @@ function notice (content, duration = defaultDuration, type, onClose) {
         `,
         onClose: onClose
     });
+
+    // 用于手动消除
+    return (function () {
+        let target = key++;
+
+        return function () {
+            instance.remove(`${prefixKey}${target}`);
+        }
+    })();
 }
 
 export default {

local/routers/msg.vue

@@ -3,7 +3,7 @@
     <Button @click="success">success</Button>
     <Button @click="error">error</Button>
     <Button @click="warning">warning</Button>
-    <Button @click="loading">loading</Button>
+    <Button @click="loading">手动消失</Button>
 </template>
 <script>
     import { Message, Button } from 'iview';
@@ -42,14 +42,16 @@
                 Message.warning('来个警告');
             },
             loading () {
-                Message.loading('我是loading');
+                const hide = Message.loading('我是loading', 0);
+
+                setTimeout(hide, 5000);
             }
         },
         ready () {
-            Message.config({
-                top: 50,
-                duration: 8
-            });
+//            Message.config({
+//                top: 50,
+//                duration: 8
+//            });
         }
     }
 </script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iview",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "title": "iView",
   "description": "A high quality  UI components Library with Vue.js",
   "homepage": "http://www.iviewui.com",