diff --git a/examples/routers/affix.vue b/examples/routers/affix.vue index fe38a9c..ca6f8de 100644 --- a/examples/routers/affix.vue +++ b/examples/routers/affix.vue @@ -10,12 +10,24 @@ } </style> <template> +<div> <Affix> - <span class="demo-affix">固定在最顶部</span> + <div class="demo-affix">固定在最顶部</div> </Affix> + <div v-for="(item,index) in arr">{{item}}</div> +</div> </template> <script> export default { - + data(){ + return { + arr: [] + } + }, + created(){ + for(let i = 0 ; i < 100 ; i++){ + this.arr.push(i); + } + } } </script> diff --git a/src/components/affix/affix.vue b/src/components/affix/affix.vue index 44ac12a..8b9cb5e 100644 --- a/src/components/affix/affix.vue +++ b/src/components/affix/affix.vue @@ -1,8 +1,9 @@ <template> <div> - <div :class="classes" :style="styles"> + <div ref="point" :class="classes" :style="styles"> <slot></slot> </div> + <div v-show="slot" :style="slotStyle"></div> </div> </template> <script> @@ -52,7 +53,9 @@ data () { return { affix: false, - styles: {} + styles: {}, + slot: false, + slotStyle: {} }; }, computed: { @@ -95,6 +98,11 @@ // Fixed Top if ((elOffset.top - this.offsetTop) < scrollTop && this.offsetType == 'top' && !affix) { this.affix = true; + this.slotStyle = { + width: this.$refs.point.clientWidth + 'px', + height: this.$refs.point.clientHeight + 'px' + } + this.slot = true; this.styles = { top: `${this.offsetTop}px`, left: `${elOffset.left}px`, @@ -103,6 +111,8 @@ this.$emit('on-change', true); } else if ((elOffset.top - this.offsetTop) > scrollTop && this.offsetType == 'top' && affix) { + this.slot = false; + this.slotStyle = {}; this.affix = false; this.styles = null; -- libgit2 0.21.4