You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
93 lines
2.3 KiB
93 lines
2.3 KiB
"use strict";
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
|
|
var _utils = require("../utils");
|
|
|
|
var _relation = require("../mixins/relation");
|
|
|
|
var _constant = require("../utils/constant");
|
|
|
|
var _scroll = require("../utils/dom/scroll");
|
|
|
|
var _createNamespace = (0, _utils.createNamespace)('index-anchor'),
|
|
createComponent = _createNamespace[0],
|
|
bem = _createNamespace[1];
|
|
|
|
var _default = createComponent({
|
|
mixins: [(0, _relation.ChildrenMixin)('vanIndexBar', {
|
|
indexKey: 'childrenIndex'
|
|
})],
|
|
props: {
|
|
index: [Number, String]
|
|
},
|
|
data: function data() {
|
|
return {
|
|
top: 0,
|
|
left: null,
|
|
rect: {
|
|
top: 0,
|
|
height: 0
|
|
},
|
|
width: null,
|
|
active: false
|
|
};
|
|
},
|
|
computed: {
|
|
sticky: function sticky() {
|
|
return this.active && this.parent.sticky;
|
|
},
|
|
anchorStyle: function anchorStyle() {
|
|
if (this.sticky) {
|
|
return {
|
|
zIndex: "" + this.parent.zIndex,
|
|
left: this.left ? this.left + "px" : null,
|
|
width: this.width ? this.width + "px" : null,
|
|
transform: "translate3d(0, " + this.top + "px, 0)",
|
|
color: this.parent.highlightColor
|
|
};
|
|
}
|
|
}
|
|
},
|
|
mounted: function mounted() {
|
|
var rect = this.$el.getBoundingClientRect();
|
|
this.rect.height = rect.height;
|
|
},
|
|
methods: {
|
|
scrollIntoView: function scrollIntoView() {
|
|
this.$el.scrollIntoView();
|
|
},
|
|
getRect: function getRect(scroller, scrollerRect) {
|
|
var el = this.$el;
|
|
var elRect = el.getBoundingClientRect();
|
|
this.rect.height = elRect.height;
|
|
|
|
if (scroller === window || scroller === document.body) {
|
|
this.rect.top = elRect.top + (0, _scroll.getRootScrollTop)();
|
|
} else {
|
|
this.rect.top = elRect.top + (0, _scroll.getScrollTop)(scroller) - scrollerRect.top;
|
|
}
|
|
|
|
return this.rect;
|
|
}
|
|
},
|
|
render: function render() {
|
|
var _ref;
|
|
|
|
var h = arguments[0];
|
|
var sticky = this.sticky;
|
|
return h("div", {
|
|
"style": {
|
|
height: sticky ? this.rect.height + "px" : null
|
|
}
|
|
}, [h("div", {
|
|
"style": this.anchorStyle,
|
|
"class": [bem({
|
|
sticky: sticky
|
|
}), (_ref = {}, _ref[_constant.BORDER_BOTTOM] = sticky, _ref)]
|
|
}, [this.slots('default') || this.index])]);
|
|
}
|
|
});
|
|
|
|
exports.default = _default; |