139 lines
4.2 KiB
JavaScript
139 lines
4.2 KiB
JavaScript
import { ref, watch, computed, nextTick, reactive, defineComponent, createVNode as _createVNode } from "vue";
|
|
import { extend, isHidden, unitToPx, numericProp, windowWidth, windowHeight, getScrollTop, getZIndexStyle, makeStringProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
|
|
import { useRect, useEventListener, useScrollParent } from "@vant/use";
|
|
import { useVisibilityChange } from "../composables/use-visibility-change.mjs";
|
|
const [name, bem] = createNamespace("sticky");
|
|
const stickyProps = {
|
|
zIndex: numericProp,
|
|
position: makeStringProp("top"),
|
|
container: Object,
|
|
offsetTop: makeNumericProp(0),
|
|
offsetBottom: makeNumericProp(0)
|
|
};
|
|
var stdin_default = defineComponent({
|
|
name,
|
|
props: stickyProps,
|
|
emits: ["scroll", "change"],
|
|
setup(props, {
|
|
emit,
|
|
slots
|
|
}) {
|
|
const root = ref();
|
|
const scrollParent = useScrollParent(root);
|
|
const state = reactive({
|
|
fixed: false,
|
|
width: 0,
|
|
// root width
|
|
height: 0,
|
|
// root height
|
|
transform: 0
|
|
});
|
|
const isReset = ref(false);
|
|
const offset = computed(() => unitToPx(props.position === "top" ? props.offsetTop : props.offsetBottom));
|
|
const rootStyle = computed(() => {
|
|
if (isReset.value) {
|
|
return;
|
|
}
|
|
const {
|
|
fixed,
|
|
height,
|
|
width
|
|
} = state;
|
|
if (fixed) {
|
|
return {
|
|
width: `${width}px`,
|
|
height: `${height}px`
|
|
};
|
|
}
|
|
});
|
|
const stickyStyle = computed(() => {
|
|
if (!state.fixed || isReset.value) {
|
|
return;
|
|
}
|
|
const style = extend(getZIndexStyle(props.zIndex), {
|
|
width: `${state.width}px`,
|
|
height: `${state.height}px`,
|
|
[props.position]: `${offset.value}px`
|
|
});
|
|
if (state.transform) {
|
|
style.transform = `translate3d(0, ${state.transform}px, 0)`;
|
|
}
|
|
return style;
|
|
});
|
|
const emitScroll = (scrollTop) => emit("scroll", {
|
|
scrollTop,
|
|
isFixed: state.fixed
|
|
});
|
|
const onScroll = () => {
|
|
if (!root.value || isHidden(root)) {
|
|
return;
|
|
}
|
|
const {
|
|
container,
|
|
position
|
|
} = props;
|
|
const rootRect = useRect(root);
|
|
const scrollTop = getScrollTop(window);
|
|
state.width = rootRect.width;
|
|
state.height = rootRect.height;
|
|
if (position === "top") {
|
|
if (container) {
|
|
const containerRect = useRect(container);
|
|
const difference = containerRect.bottom - offset.value - state.height;
|
|
state.fixed = offset.value > rootRect.top && containerRect.bottom > 0;
|
|
state.transform = difference < 0 ? difference : 0;
|
|
} else {
|
|
state.fixed = offset.value > rootRect.top;
|
|
}
|
|
} else {
|
|
const {
|
|
clientHeight
|
|
} = document.documentElement;
|
|
if (container) {
|
|
const containerRect = useRect(container);
|
|
const difference = clientHeight - containerRect.top - offset.value - state.height;
|
|
state.fixed = clientHeight - offset.value < rootRect.bottom && clientHeight > containerRect.top;
|
|
state.transform = difference < 0 ? -difference : 0;
|
|
} else {
|
|
state.fixed = clientHeight - offset.value < rootRect.bottom;
|
|
}
|
|
}
|
|
emitScroll(scrollTop);
|
|
};
|
|
watch(() => state.fixed, (value) => emit("change", value));
|
|
useEventListener("scroll", onScroll, {
|
|
target: scrollParent,
|
|
passive: true
|
|
});
|
|
useVisibilityChange(root, onScroll);
|
|
watch([windowWidth, windowHeight], () => {
|
|
if (!root.value || isHidden(root) || !state.fixed) {
|
|
return;
|
|
}
|
|
isReset.value = true;
|
|
nextTick(() => {
|
|
const rootRect = useRect(root);
|
|
state.width = rootRect.width;
|
|
state.height = rootRect.height;
|
|
isReset.value = false;
|
|
});
|
|
});
|
|
return () => {
|
|
var _a;
|
|
return _createVNode("div", {
|
|
"ref": root,
|
|
"style": rootStyle.value
|
|
}, [_createVNode("div", {
|
|
"class": bem({
|
|
fixed: state.fixed && !isReset.value
|
|
}),
|
|
"style": stickyStyle.value
|
|
}, [(_a = slots.default) == null ? void 0 : _a.call(slots)])]);
|
|
};
|
|
}
|
|
});
|
|
export {
|
|
stdin_default as default,
|
|
stickyProps
|
|
};
|