fix(IndexBar): incorrect behavior inside popup (#7559)

This commit is contained in:
neverland
2020-11-15 10:43:12 +08:00
committed by GitHub
parent 97f2028e4e
commit d78438a899
3 changed files with 25 additions and 32 deletions

View File

@@ -1,6 +1,7 @@
import { createNamespace } from '../utils';
import { ChildrenMixin } from '../mixins/relation';
import { BORDER_BOTTOM } from '../utils/constant';
import { getScrollTop, getRootScrollTop } from '../utils/dom/scroll';
const [createComponent, bem] = createNamespace('index-anchor');
@@ -15,6 +16,7 @@ export default createComponent({
return {
top: 0,
left: null,
rect: { top: 0, height: 0 },
width: null,
active: false,
};
@@ -39,20 +41,35 @@ export default createComponent({
},
mounted() {
this.height = this.$el.offsetHeight;
const rect = this.$el.getBoundingClientRect();
this.rect.height = rect.height;
},
methods: {
scrollIntoView() {
this.$el.scrollIntoView();
},
getRect(scroller, scrollerRect) {
const el = this.$el;
const elRect = el.getBoundingClientRect();
this.rect.height = elRect.height;
if (scroller === window || scroller === document.body) {
this.rect.top = elRect.top + getRootScrollTop();
} else {
this.rect.top = elRect.top + getScrollTop(scroller) - scrollerRect.top;
}
return this.rect;
},
},
render() {
const { sticky } = this;
return (
<div style={{ height: sticky ? `${this.height}px` : null }}>
<div style={{ height: sticky ? `${this.rect.height}px` : null }}>
<div
style={this.anchorStyle}
class={[bem({ sticky }), { [BORDER_BOTTOM]: sticky }]}