diff --git a/examples/routers/message.vue b/examples/routers/message.vue index dc11d98..3217be4 100644 --- a/examples/routers/message.vue +++ b/examples/routers/message.vue @@ -1,16 +1,45 @@ <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> diff --git a/src/styles/components/message.less b/src/styles/components/message.less index edee077..8799d64 100644 --- a/src/styles/components/message.less +++ b/src/styles/components/message.less @@ -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 -- libgit2 0.21.4