index.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
  2. import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
  3. import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
  4. import { defineComponent, nextTick, onActivated, onBeforeUnmount, onMounted, reactive, ref, watch, onDeactivated } from 'vue';
  5. import VerticalAlignTopOutlined from "@ant-design/icons-vue/es/icons/VerticalAlignTopOutlined";
  6. import addEventListener from '../vc-util/Dom/addEventListener';
  7. import getScroll from '../_util/getScroll';
  8. import { getTransitionProps, Transition } from '../_util/transition';
  9. import scrollTo from '../_util/scrollTo';
  10. import { withInstall } from '../_util/type';
  11. import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
  12. import useConfigInject from '../_util/hooks/useConfigInject';
  13. export var backTopProps = function backTopProps() {
  14. return {
  15. visibilityHeight: {
  16. type: Number,
  17. default: 400
  18. },
  19. duration: {
  20. type: Number,
  21. default: 450
  22. },
  23. target: Function,
  24. prefixCls: String,
  25. onClick: Function
  26. // visible: { type: Boolean, default: undefined }, // Only for test. Don't use it.
  27. };
  28. };
  29. var BackTop = defineComponent({
  30. compatConfig: {
  31. MODE: 3
  32. },
  33. name: 'ABackTop',
  34. inheritAttrs: false,
  35. props: backTopProps(),
  36. // emits: ['click'],
  37. setup: function setup(props, _ref) {
  38. var slots = _ref.slots,
  39. attrs = _ref.attrs,
  40. emit = _ref.emit;
  41. var _useConfigInject = useConfigInject('back-top', props),
  42. prefixCls = _useConfigInject.prefixCls,
  43. direction = _useConfigInject.direction;
  44. var domRef = ref();
  45. var state = reactive({
  46. visible: false,
  47. scrollEvent: null
  48. });
  49. var getDefaultTarget = function getDefaultTarget() {
  50. return domRef.value && domRef.value.ownerDocument ? domRef.value.ownerDocument : window;
  51. };
  52. var scrollToTop = function scrollToTop(e) {
  53. var _props$target = props.target,
  54. target = _props$target === void 0 ? getDefaultTarget : _props$target,
  55. duration = props.duration;
  56. scrollTo(0, {
  57. getContainer: target,
  58. duration: duration
  59. });
  60. emit('click', e);
  61. };
  62. var handleScroll = throttleByAnimationFrame(function (e) {
  63. var visibilityHeight = props.visibilityHeight;
  64. var scrollTop = getScroll(e.target, true);
  65. state.visible = scrollTop > visibilityHeight;
  66. });
  67. var bindScrollEvent = function bindScrollEvent() {
  68. var target = props.target;
  69. var getTarget = target || getDefaultTarget;
  70. var container = getTarget();
  71. state.scrollEvent = addEventListener(container, 'scroll', function (e) {
  72. handleScroll(e);
  73. });
  74. handleScroll({
  75. target: container
  76. });
  77. };
  78. var scrollRemove = function scrollRemove() {
  79. if (state.scrollEvent) {
  80. state.scrollEvent.remove();
  81. }
  82. handleScroll.cancel();
  83. };
  84. watch(function () {
  85. return props.target;
  86. }, function () {
  87. scrollRemove();
  88. nextTick(function () {
  89. bindScrollEvent();
  90. });
  91. });
  92. onMounted(function () {
  93. nextTick(function () {
  94. bindScrollEvent();
  95. });
  96. });
  97. onActivated(function () {
  98. nextTick(function () {
  99. bindScrollEvent();
  100. });
  101. });
  102. onDeactivated(function () {
  103. scrollRemove();
  104. });
  105. onBeforeUnmount(function () {
  106. scrollRemove();
  107. });
  108. return function () {
  109. var _class, _slots$default;
  110. var defaultElement = _createVNode("div", {
  111. "class": "".concat(prefixCls.value, "-content")
  112. }, [_createVNode("div", {
  113. "class": "".concat(prefixCls.value, "-icon")
  114. }, [_createVNode(VerticalAlignTopOutlined, null, null)])]);
  115. var divProps = _objectSpread(_objectSpread({}, attrs), {}, {
  116. onClick: scrollToTop,
  117. class: (_class = {}, _defineProperty(_class, "".concat(prefixCls.value), true), _defineProperty(_class, "".concat(attrs.class), attrs.class), _defineProperty(_class, "".concat(prefixCls.value, "-rtl"), direction.value === 'rtl'), _class)
  118. });
  119. var transitionProps = getTransitionProps('fade');
  120. return _createVNode(Transition, transitionProps, {
  121. default: function _default() {
  122. return [_withDirectives(_createVNode("div", _objectSpread(_objectSpread({}, divProps), {}, {
  123. "ref": domRef
  124. }), [((_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)) || defaultElement]), [[_vShow, state.visible]])];
  125. }
  126. });
  127. };
  128. }
  129. });
  130. export default withInstall(BackTop);