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 | } |