tdesign-vue-next
Version:
TDesign Component for vue-next
219 lines (211 loc) • 8.39 kB
JavaScript
/**
* tdesign v1.13.2
* (c) 2025 tdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
var Vue = require('vue');
var _regeneratorRuntime = require('@babel/runtime/regenerator');
var utils_dom = require('../utils/dom.js');
var affix_props = require('./props.js');
require('@babel/runtime/helpers/toConsumableArray');
require('@babel/runtime/helpers/typeof');
var index$1 = require('../_chunks/dep-3b30db48.js');
var index = require('../_chunks/dep-c7495e60.js');
require('@babel/runtime/helpers/slicedToArray');
require('../_chunks/dep-dd797c18.js');
require('@babel/runtime/helpers/defineProperty');
var isUndefined = require('../_chunks/dep-7f7a6d65.js');
var isFunction = require('../_chunks/dep-6f35bfc1.js');
require('../_chunks/dep-5c9b4e07.js');
require('../_chunks/dep-ac58e1cc.js');
require('../_chunks/dep-5c87313c.js');
require('../_chunks/dep-d17ed13a.js');
require('../_chunks/dep-8c59be4f.js');
require('../_chunks/dep-86aa65fa.js');
require('../utils/render-tnode.js');
require('../_chunks/dep-c94e2f5d.js');
require('../_chunks/dep-f816bbf9.js');
require('../_chunks/dep-97330476.js');
require('../_chunks/dep-2526f711.js');
require('../_chunks/dep-f38ba1a9.js');
require('../_chunks/dep-64c5d425.js');
require('../_chunks/dep-2213ced9.js');
require('../_chunks/dep-0c7d3fa0.js');
require('../_chunks/dep-955ed406.js');
require('../_chunks/dep-3ae66374.js');
require('../_chunks/dep-b478162d.js');
require('../_chunks/dep-7f6ae34b.js');
require('../_chunks/dep-53860ab2.js');
require('../_chunks/dep-1c53d2aa.js');
require('../_chunks/dep-c99964ce.js');
require('../config-provider/hooks/useConfig.js');
require('../_chunks/dep-7636cb2b.js');
require('../_chunks/dep-7fa36748.js');
require('dayjs');
require('../_chunks/dep-1585ec9b.js');
require('../_chunks/dep-bd4650d2.js');
require('../_chunks/dep-cb8b352a.js');
require('../_chunks/dep-43233220.js');
require('../_chunks/dep-ef233591.js');
require('../_chunks/dep-c54c953e.js');
require('../_chunks/dep-14dde3a2.js');
require('../_chunks/dep-36c231db.js');
require('../_chunks/dep-84cc4997.js');
require('@babel/runtime/helpers/createClass');
require('@babel/runtime/helpers/classCallCheck');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
var _Affix = Vue.defineComponent({
name: "TAffix",
props: affix_props["default"],
emits: ["fixedChange"],
setup: function setup(props2, context) {
var _document;
var COMPONENT_NAME = index.usePrefixClass("affix");
var renderTNodeJSX = index$1.useTNodeJSX();
var affixWrapRef = Vue.ref(null);
var affixRef = Vue.ref(null);
var placeholderEL = Vue.ref((_document = document) === null || _document === void 0 ? void 0 : _document.createElement("div"));
var ticking = Vue.ref(false);
var isBind = Vue.ref(false);
var scrollContainer = Vue.ref();
var affixStyle = Vue.ref();
var rAFId = 0;
var handleScroll = function handleScroll() {
if (!ticking.value) {
rAFId = window.requestAnimationFrame(function () {
var _affixWrapRef$value$g, _affixWrapRef$value;
rAFId = 0;
var _ref = (_affixWrapRef$value$g = (_affixWrapRef$value = affixWrapRef.value) === null || _affixWrapRef$value === void 0 ? void 0 : _affixWrapRef$value.getBoundingClientRect()) !== null && _affixWrapRef$value$g !== void 0 ? _affixWrapRef$value$g : {
top: 0,
width: 0,
height: 0
},
wrapToTop = _ref.top,
wrapWidth = _ref.width,
wrapHeight = _ref.height;
var containerTop = 0;
if (scrollContainer.value instanceof HTMLElement) {
containerTop = scrollContainer.value.getBoundingClientRect().top;
}
var fixedTop;
var calcTop = wrapToTop - containerTop;
var containerHeight = scrollContainer.value[scrollContainer.value instanceof Window ? "innerHeight" : "clientHeight"] - wrapHeight;
var calcBottom = containerTop + containerHeight - props2.offsetBottom;
if (!isUndefined.isUndefined(props2.offsetTop) && calcTop <= props2.offsetTop) {
fixedTop = containerTop + props2.offsetTop;
} else if (!isUndefined.isUndefined(props2.offsetBottom) && wrapToTop >= calcBottom) {
fixedTop = calcBottom;
} else {
fixedTop = false;
}
if (affixRef.value) {
var affixed = fixedTop !== false;
var placeholderStatus = affixWrapRef.value.contains(placeholderEL.value);
if (affixed) {
affixRef.value.className = COMPONENT_NAME.value;
affixStyle.value = {
top: "".concat(fixedTop, "px"),
width: "".concat(wrapWidth, "px"),
height: "".concat(wrapHeight, "px"),
zIndex: props2.zIndex
};
if (!placeholderStatus) {
placeholderEL.value.style.width = "".concat(wrapWidth, "px");
placeholderEL.value.style.height = "".concat(wrapHeight, "px");
affixWrapRef.value.appendChild(placeholderEL.value);
}
} else {
affixRef.value.removeAttribute("class");
affixStyle.value = void 0;
placeholderStatus && placeholderEL.value.remove();
}
context.emit("fixedChange", affixed, {
top: Number(fixedTop)
});
if (isFunction.isFunction(props2.onFixedChange)) props2.onFixedChange(affixed, {
top: Number(fixedTop)
});
}
ticking.value = false;
});
ticking.value = true;
}
};
var bindScroll = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator__default["default"](/*#__PURE__*/_regeneratorRuntime__default["default"].mark(function _callee() {
return _regeneratorRuntime__default["default"].wrap(function (_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.next = 1;
return Vue.nextTick();
case 1:
if (!isBind.value) {
_context.next = 2;
break;
}
return _context.abrupt("return");
case 2:
scrollContainer.value = utils_dom.getScrollContainer(props2.container);
utils_dom.on(scrollContainer.value, "scroll", handleScroll);
utils_dom.on(window, "resize", handleScroll);
isBind.value = true;
case 3:
case "end":
return _context.stop();
}
}, _callee);
}));
return function bindScroll() {
return _ref2.apply(this, arguments);
};
}();
var unbindScroll = function unbindScroll() {
if (!scrollContainer.value || !isBind.value) return;
utils_dom.off(scrollContainer.value, "scroll", handleScroll);
utils_dom.off(window, "resize", handleScroll);
if (rAFId) {
window.cancelAnimationFrame(rAFId);
}
isBind.value = false;
};
Vue.watch(function () {
return props2.offsetTop;
}, function () {
handleScroll();
});
Vue.watch(function () {
return props2.offsetBottom;
}, function () {
handleScroll();
});
Vue.watch(function () {
return props2.zIndex;
}, function () {
handleScroll();
});
Vue.onMounted(bindScroll);
Vue.onActivated(bindScroll);
Vue.onDeactivated(unbindScroll);
Vue.onBeforeUnmount(unbindScroll);
context.expose({
scrollContainer: scrollContainer,
affixWrapRef: affixWrapRef,
handleScroll: handleScroll
});
return function () {
return Vue.createVNode("div", {
"ref": affixWrapRef
}, [Vue.createVNode("div", {
"ref": affixRef,
"style": affixStyle.value
}, [renderTNodeJSX("default")])]);
};
}
});
exports["default"] = _Affix;
//# sourceMappingURL=affix.js.map