UNPKG

tdesign-mobile-vue

Version:
103 lines (99 loc) 3.58 kB
/** * tdesign v1.7.0 * (c) 2024 TDesign Group * @license MIT */ import { defineComponent, ref, computed, watch, createVNode } from 'vue'; import { useElementBounding } from '@vueuse/core'; import StickyProps from './props.js'; import config from '../config.js'; import { usePrefixClass } from '../hooks/useClass.js'; import { useTNodeJSX } from '../hooks/tnode.js'; import '../config-provider/useConfig.js'; import '@babel/runtime/helpers/defineProperty'; import 'lodash/isFunction'; import 'lodash/cloneDeep'; import 'lodash/isString'; import '../config-provider/context.js'; import 'lodash/mergeWith'; import 'lodash/merge'; import 'lodash/isArray'; import '../_common/js/global-config/mobile/default-config.js'; import '../_common/js/global-config/mobile/locale/zh_CN.js'; import '../_chunks/dep-d5364bc4.js'; import '@babel/runtime/helpers/typeof'; import '../_chunks/dep-eb734424.js'; import 'dayjs'; import 'lodash/camelCase'; import 'lodash/kebabCase'; import '../hooks/render-tnode.js'; import 'lodash/isEmpty'; import 'lodash/isObject'; var prefix = config.prefix; var _Sticky = defineComponent({ name: "".concat(prefix, "-sticky"), props: StickyProps, setup: function setup(props) { var renderTNodeJSX = useTNodeJSX(); var stickyBarClass = usePrefixClass("sticky"); var boxRef = ref(); var _useElementBounding = useElementBounding(boxRef), boxTop = _useElementBounding.top; var contentRef = ref(); var _useElementBounding2 = useElementBounding(contentRef), contentTop = _useElementBounding2.top, height = _useElementBounding2.height; var stickyStyle = computed(function () { return "height:".concat(height.value, "px;"); }); var container; var containerHeight = ref(0); var containerTop = ref(0); watch(boxTop, function () { if (props.container) { container = document.querySelector(props.container); var _container$getBoundin = container.getBoundingClientRect(), top = _container$getBoundin.top, height2 = _container$getBoundin.height; containerHeight.value = height2; containerTop.value = top; } }); var contentStyles = computed(function () { var _props$onScroll; var styleStr = "z-index:".concat(props.zIndex, ";"); var isFixed = false; if (props.disabled) return styleStr; var offsetTop = Number(props.offsetTop); if (container) { if (containerHeight.value + containerTop.value < offsetTop + height.value) { styleStr += "transform:translate3d(0, ".concat(containerHeight.value - height.value, "px, 0);"); } else if (boxTop.value <= offsetTop) { styleStr += "position:fixed;top:".concat(offsetTop, "px;"); isFixed = true; } } else if (boxTop.value <= offsetTop) { styleStr += "position:fixed;top:".concat(offsetTop, "px;"); isFixed = true; } (_props$onScroll = props.onScroll) === null || _props$onScroll === void 0 || _props$onScroll.call(props, { scrollTop: contentTop.value, isFixed: isFixed }); return styleStr; }); return function () { return createVNode("div", { "ref": boxRef, "class": stickyBarClass.value, "style": stickyStyle.value }, [createVNode("div", { "ref": contentRef, "class": "".concat(stickyBarClass.value, "__content"), "style": contentStyles.value }, [renderTNodeJSX("default")])]); }; } }); export { _Sticky as default }; //# sourceMappingURL=sticky.js.map