diff --git a/examples/routers/message.vue b/examples/routers/message.vue index 19644db9..658812a7 100644 --- a/examples/routers/message.vue +++ b/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 + }); } } diff --git a/src/styles/components/message.less b/src/styles/components/message.less index 6e706f12..2c457d35 100644 --- a/src/styles/components/message.less +++ b/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; }