Commit 0069c7b150469b0ca795682cde5ba02bd514cf51
1 parent
14b1413a
update Message style
Showing
2 changed files
with
40 additions
and
7 deletions
Show diff stats
examples/routers/message.vue
| 1 | <template> | 1 | <template> |
| 2 | - <Button @click="loading">Display loading...</Button> | 2 | + <div> |
| 3 | + <Button type="primary" @click="info">Display info prompt</Button> | ||
| 4 | + <Button @click="success">Display success prompt</Button> | ||
| 5 | + <Button @click="warning">Display warning prompt</Button> | ||
| 6 | + <Button @click="error">Display error prompt</Button> | ||
| 7 | + <Button @click="loading">Display loading...</Button> | ||
| 8 | + <Button @click="closable">Display a closable message</Button> | ||
| 9 | + </div> | ||
| 3 | </template> | 10 | </template> |
| 4 | <script> | 11 | <script> |
| 5 | export default { | 12 | export default { |
| 6 | methods: { | 13 | methods: { |
| 14 | + info () { | ||
| 15 | + this.$Message.info({ | ||
| 16 | + content: '这是一条普通的提示', | ||
| 17 | + duration: 1000 | ||
| 18 | + }); | ||
| 19 | + }, | ||
| 20 | + success () { | ||
| 21 | + this.$Message.success('This is a success tip'); | ||
| 22 | + }, | ||
| 23 | + warning () { | ||
| 24 | + this.$Message.warning('This is a warning tip'); | ||
| 25 | + }, | ||
| 26 | + error () { | ||
| 27 | + this.$Message.error('This is an error tip'); | ||
| 28 | + }, | ||
| 7 | loading () { | 29 | loading () { |
| 8 | const msg = this.$Message.loading({ | 30 | const msg = this.$Message.loading({ |
| 9 | content: 'Loading...', | 31 | content: 'Loading...', |
| 10 | duration: 0 | 32 | duration: 0 |
| 11 | }); | 33 | }); |
| 12 | - setTimeout(msg, 103000); | 34 | + setTimeout(msg, 3000); |
| 13 | }, | 35 | }, |
| 36 | + closable () { | ||
| 37 | + this.$Message.info({ | ||
| 38 | + content: 'Tips for manual closing', | ||
| 39 | + duration: 1000, | ||
| 40 | + closable: true | ||
| 41 | + }); | ||
| 42 | + } | ||
| 14 | } | 43 | } |
| 15 | } | 44 | } |
| 16 | </script> | 45 | </script> |
src/styles/components/message.less
| @@ -2,7 +2,7 @@ | @@ -2,7 +2,7 @@ | ||
| 2 | @icon-prefix-cls: ~"@{css-prefix}icon"; | 2 | @icon-prefix-cls: ~"@{css-prefix}icon"; |
| 3 | 3 | ||
| 4 | .@{message-prefix-cls} { | 4 | .@{message-prefix-cls} { |
| 5 | - font-size: @font-size-small; | 5 | + font-size: @font-size-base; |
| 6 | position: fixed; | 6 | position: fixed; |
| 7 | z-index: @zindex-message; | 7 | z-index: @zindex-message; |
| 8 | width: 100%; | 8 | width: 100%; |
| @@ -70,9 +70,13 @@ | @@ -70,9 +70,13 @@ | ||
| 70 | } | 70 | } |
| 71 | 71 | ||
| 72 | .@{icon-prefix-cls} { | 72 | .@{icon-prefix-cls} { |
| 73 | - margin-right: 8px; | ||
| 74 | - font-size: 14px; | ||
| 75 | - top: 1px; | ||
| 76 | - position: relative; | 73 | + margin-right: 4px; |
| 74 | + font-size: @font-size-large; | ||
| 75 | + vertical-align: middle; | ||
| 76 | + } | ||
| 77 | + &-custom-content{ | ||
| 78 | + span{ | ||
| 79 | + vertical-align: middle; | ||
| 80 | + } | ||
| 77 | } | 81 | } |
| 78 | } | 82 | } |
| 79 | \ No newline at end of file | 83 | \ No newline at end of file |