update Message style

梁灏
1 parent 14b1413a
Showing 2 changed files with 40 additions and 7 deletions Show diff stats
examples/routers/message.vue
src/styles/components/message.less
 <template>
-    <Button @click="loading">Display loading...</Button>
+    <div>
+        <Button type="primary" @click="info">Display info prompt</Button>
+        <Button @click="success">Display success prompt</Button>
+        <Button @click="warning">Display warning prompt</Button>
+        <Button @click="error">Display error prompt</Button>
+        <Button @click="loading">Display loading...</Button>
+        <Button @click="closable">Display a closable message</Button>
+    </div>
 </template>
 <script>
     export default {
         methods: {
+            info () {
+                this.$Message.info({
+                    content: '这是一条普通的提示',
+                    duration: 1000
+                });
+            },
+            success () {
+                this.$Message.success('This is a success tip');
+            },
+            warning () {
+                this.$Message.warning('This is a warning tip');
+            },
+            error () {
+                this.$Message.error('This is an error tip');
+            },
             loading () {
                 const msg = this.$Message.loading({
                     content: 'Loading...',
                     duration: 0
                 });
-                setTimeout(msg, 103000);
+                setTimeout(msg, 3000);
             },
+            closable () {
+                this.$Message.info({
+                    content: 'Tips for manual closing',
+                    duration: 1000,
+                    closable: true
+                });
+            }
         }
     }
 </script>
@@ -2,7 +2,7 @@
 @icon-prefix-cls: ~"@{css-prefix}icon";
  
 .@{message-prefix-cls} {
-    font-size: @font-size-small;
+    font-size: @font-size-base;
     position: fixed;
     z-index: @zindex-message;
     width: 100%;
@@ -70,9 +70,13 @@
     }
  
     .@{icon-prefix-cls} {
-        margin-right: 8px;
-        font-size: 14px;
-        top: 1px;
-        position: relative;
+        margin-right: 4px;
+        font-size: @font-size-large;
+        vertical-align: middle;
+    }
+    &-custom-content{
+        span{
+            vertical-align: middle;
+        }
     }
 }
 \ No newline at end of file