index.js 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. import { createNamespace } from '../utils';
  2. import { ChildrenMixin } from '../mixins/relation';
  3. import { BORDER_BOTTOM } from '../utils/constant';
  4. import { getScrollTop, getRootScrollTop } from '../utils/dom/scroll';
  5. var _createNamespace = createNamespace('index-anchor'),
  6. createComponent = _createNamespace[0],
  7. bem = _createNamespace[1];
  8. export default createComponent({
  9. mixins: [ChildrenMixin('vanIndexBar', {
  10. indexKey: 'childrenIndex'
  11. })],
  12. props: {
  13. index: [Number, String]
  14. },
  15. data: function data() {
  16. return {
  17. top: 0,
  18. left: null,
  19. rect: {
  20. top: 0,
  21. height: 0
  22. },
  23. width: null,
  24. active: false
  25. };
  26. },
  27. computed: {
  28. sticky: function sticky() {
  29. return this.active && this.parent.sticky;
  30. },
  31. anchorStyle: function anchorStyle() {
  32. if (this.sticky) {
  33. return {
  34. zIndex: "" + this.parent.zIndex,
  35. left: this.left ? this.left + "px" : null,
  36. width: this.width ? this.width + "px" : null,
  37. transform: "translate3d(0, " + this.top + "px, 0)",
  38. color: this.parent.highlightColor
  39. };
  40. }
  41. }
  42. },
  43. mounted: function mounted() {
  44. var rect = this.$el.getBoundingClientRect();
  45. this.rect.height = rect.height;
  46. },
  47. methods: {
  48. scrollIntoView: function scrollIntoView() {
  49. this.$el.scrollIntoView();
  50. },
  51. getRect: function getRect(scroller, scrollerRect) {
  52. var el = this.$el;
  53. var elRect = el.getBoundingClientRect();
  54. this.rect.height = elRect.height;
  55. if (scroller === window || scroller === document.body) {
  56. this.rect.top = elRect.top + getRootScrollTop();
  57. } else {
  58. this.rect.top = elRect.top + getScrollTop(scroller) - scrollerRect.top;
  59. }
  60. return this.rect;
  61. }
  62. },
  63. render: function render() {
  64. var _ref;
  65. var h = arguments[0];
  66. var sticky = this.sticky;
  67. return h("div", {
  68. "style": {
  69. height: sticky ? this.rect.height + "px" : null
  70. }
  71. }, [h("div", {
  72. "style": this.anchorStyle,
  73. "class": [bem({
  74. sticky: sticky
  75. }), (_ref = {}, _ref[BORDER_BOTTOM] = sticky, _ref)]
  76. }, [this.slots('default') || this.index])]);
  77. }
  78. });