index.js 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. import _extends from 'babel-runtime/helpers/extends';
  2. import PropTypes from '../_util/vue-types';
  3. import addEventListener from '../vc-util/Dom/addEventListener';
  4. import getScroll from '../_util/getScroll';
  5. import BaseMixin from '../_util/BaseMixin';
  6. import getTransitionProps from '../_util/getTransitionProps';
  7. import { ConfigConsumerProps } from '../config-provider/configConsumerProps';
  8. import Base from '../base';
  9. import { getListeners } from '../_util/props-util';
  10. import scrollTo from '../_util/scrollTo';
  11. function getDefaultTarget() {
  12. return window;
  13. }
  14. var BackTopProps = {
  15. visibilityHeight: PropTypes.number,
  16. // onClick?: React.MouseEventHandler<any>;
  17. target: PropTypes.func,
  18. prefixCls: PropTypes.string
  19. // visible: PropTypes.bool, // Only for test. Don't use it.
  20. };
  21. var BackTop = {
  22. name: 'ABackTop',
  23. mixins: [BaseMixin],
  24. props: _extends({}, BackTopProps, {
  25. visibilityHeight: PropTypes.number.def(400)
  26. }),
  27. inject: {
  28. configProvider: { 'default': function _default() {
  29. return ConfigConsumerProps;
  30. } }
  31. },
  32. data: function data() {
  33. this.scrollEvent = null;
  34. return {
  35. visible: false
  36. };
  37. },
  38. mounted: function mounted() {
  39. var _this = this;
  40. this.$nextTick(function () {
  41. var getTarget = _this.target || getDefaultTarget;
  42. _this.scrollEvent = addEventListener(getTarget(), 'scroll', _this.handleScroll);
  43. _this.handleScroll();
  44. });
  45. },
  46. activated: function activated() {
  47. var _this2 = this;
  48. this.$nextTick(function () {
  49. _this2.handleScroll();
  50. });
  51. },
  52. beforeDestroy: function beforeDestroy() {
  53. if (this.scrollEvent) {
  54. this.scrollEvent.remove();
  55. }
  56. },
  57. methods: {
  58. getCurrentScrollTop: function getCurrentScrollTop() {
  59. var getTarget = this.target || getDefaultTarget;
  60. var targetNode = getTarget();
  61. if (targetNode === window) {
  62. return window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
  63. }
  64. return targetNode.scrollTop;
  65. },
  66. scrollToTop: function scrollToTop(e) {
  67. var _target = this.target,
  68. target = _target === undefined ? getDefaultTarget : _target;
  69. scrollTo(0, {
  70. getContainer: target
  71. });
  72. this.$emit('click', e);
  73. },
  74. handleScroll: function handleScroll() {
  75. var visibilityHeight = this.visibilityHeight,
  76. _target2 = this.target,
  77. target = _target2 === undefined ? getDefaultTarget : _target2;
  78. var scrollTop = getScroll(target(), true);
  79. this.setState({
  80. visible: scrollTop > visibilityHeight
  81. });
  82. }
  83. },
  84. render: function render() {
  85. var h = arguments[0];
  86. var customizePrefixCls = this.prefixCls,
  87. $slots = this.$slots;
  88. var getPrefixCls = this.configProvider.getPrefixCls;
  89. var prefixCls = getPrefixCls('back-top', customizePrefixCls);
  90. var defaultElement = h(
  91. 'div',
  92. { 'class': prefixCls + '-content' },
  93. [h('div', { 'class': prefixCls + '-icon' })]
  94. );
  95. var divProps = {
  96. on: _extends({}, getListeners(this), {
  97. click: this.scrollToTop
  98. }),
  99. 'class': prefixCls
  100. };
  101. var backTopBtn = this.visible ? h(
  102. 'div',
  103. divProps,
  104. [$slots['default'] || defaultElement]
  105. ) : null;
  106. var transitionProps = getTransitionProps('fade');
  107. return h(
  108. 'transition',
  109. transitionProps,
  110. [backTopBtn]
  111. );
  112. }
  113. };
  114. /* istanbul ignore next */
  115. BackTop.install = function (Vue) {
  116. Vue.use(Base);
  117. Vue.component(BackTop.name, BackTop);
  118. };
  119. export default BackTop;