Commit 36a9157947148a0747062137d4555619af32f7ae

Authored by 梁灏
1 parent a87597bf

fixed #1881

examples/routers/message.vue
@@ -38,10 +38,10 @@ @@ -38,10 +38,10 @@
38 } 38 }
39 }, 39 },
40 mounted () { 40 mounted () {
41 - this.$Message.config({  
42 - top: 50,  
43 - duration: 3  
44 - }); 41 +// this.$Message.config({
  42 +// top: 50,
  43 +// duration: 3
  44 +// });
45 } 45 }
46 } 46 }
47 </script> 47 </script>
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 }