index.js 5.2 KB

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