Merge pull request #1883 from iview/pr/1789

Pr/1789

examples/routers/message.vue

@@ -22,7 +22,10 @@
                 })
             },
             success () {
-                this.$Message.success('这是一条成功的提示');
+                this.$Message.success({
+                    content: '这是一条成功的提示',
+                    duration: 4
+                });
             },
             warning () {
                 this.$Message.warning('这是一条警告的提示');
@@ -33,6 +36,12 @@
             destroy () {
                 this.$Message.destroy();
             }
+        },
+        mounted () {
+            this.$Message.config({
+                top: 50,
+                duration: 3
+            });
         }
     }
 </script>

src/styles/components/message.less

@@ -8,12 +8,14 @@
     width: 100%;
     top: 16px;
     left: 0;
+    pointer-events: none;
 
     &-notice {
-        width: auto;
-        vertical-align: middle;
-        position: absolute;
-        left: 50%;
+        padding: 8px;
+        text-align: center;
+        &:first-child {
+          margin-top: -8px;
+        }
 
         &-close {
             position: absolute;
@@ -29,14 +31,14 @@
     }
 
     &-notice-content {
-        position: relative;
-        right: 50%;
+        display: inline-block;
+        pointer-events: all;
         padding: 8px 16px;
         //border: 1px solid @border-color-split;
         border-radius: @border-radius-small;
         box-shadow: @shadow-base;
         background: #fff;
-        display: block;
+        position: relative;
         &-text{
             display: inline-block;
         }