Commit 36a9157947148a0747062137d4555619af32f7ae
1 parent
a87597bf
fixed #1881
Showing
3 changed files
with
19 additions
and
5 deletions
Show diff stats
examples/routers/message.vue
src/components/base/notification/notice.vue
| 1 | <template> | 1 | <template> |
| 2 | - <transition :name="transitionName"> | 2 | + <transition :name="transitionName" @enter="handleEnter" @leave="handleLeave"> |
| 3 | <div :class="classes" :style="styles"> | 3 | <div :class="classes" :style="styles"> |
| 4 | <template v-if="type === 'notice'"> | 4 | <template v-if="type === 'notice'"> |
| 5 | <div :class="[baseClass + '-content']" ref="content" v-html="content"></div> | 5 | <div :class="[baseClass + '-content']" ref="content" v-html="content"></div> |
| @@ -96,6 +96,18 @@ | @@ -96,6 +96,18 @@ | ||
| 96 | this.clearCloseTimer(); | 96 | this.clearCloseTimer(); |
| 97 | this.onClose(); | 97 | this.onClose(); |
| 98 | this.$parent.close(this.name); | 98 | this.$parent.close(this.name); |
| 99 | + }, | ||
| 100 | + handleEnter (el) { | ||
| 101 | + if (this.type === 'message') { | ||
| 102 | + el.style.height = el.scrollHeight + 'px'; | ||
| 103 | + } | ||
| 104 | + }, | ||
| 105 | + handleLeave (el) { | ||
| 106 | + if (this.type === 'message') { | ||
| 107 | + el.style.height = 0; | ||
| 108 | + el.style.paddingTop = 0; | ||
| 109 | + el.style.paddingBottom = 0; | ||
| 110 | + } | ||
| 99 | } | 111 | } |
| 100 | }, | 112 | }, |
| 101 | mounted () { | 113 | mounted () { |
src/styles/components/message.less
| @@ -13,6 +13,8 @@ | @@ -13,6 +13,8 @@ | ||
| 13 | &-notice { | 13 | &-notice { |
| 14 | padding: 8px; | 14 | padding: 8px; |
| 15 | text-align: center; | 15 | text-align: center; |
| 16 | + transition: height @animation-time @ease-in-out, padding @animation-time @ease-in-out; | ||
| 17 | + | ||
| 16 | &:first-child { | 18 | &:first-child { |
| 17 | margin-top: -8px; | 19 | margin-top: -8px; |
| 18 | } | 20 | } |