index.js 4.4 KB

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