refactor: MkStickyContainerで<style />を使う (#14755)
* remove rootEL ref * use css module * use v-bind in css * --MI prefix * remove unused ref --------- Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
This commit is contained in:
parent
85bb1ff1db
commit
ee08e9f51e
@ -4,19 +4,18 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||||||
-->
|
-->
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div ref="rootEl">
|
<div>
|
||||||
<div ref="headerEl">
|
<div ref="headerEl" :class="$style.header">
|
||||||
<slot name="header"></slot>
|
<slot name="header"></slot>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
ref="bodyEl"
|
:class="$style.body"
|
||||||
:data-sticky-container-header-height="headerHeight"
|
:data-sticky-container-header-height="headerHeight"
|
||||||
:data-sticky-container-footer-height="footerHeight"
|
:data-sticky-container-footer-height="footerHeight"
|
||||||
style="position: relative; z-index: 0;"
|
|
||||||
>
|
>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
<div ref="footerEl">
|
<div ref="footerEl" :class="$style.footer">
|
||||||
<slot name="footer"></slot>
|
<slot name="footer"></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -27,10 +26,8 @@ import { onMounted, onUnmounted, provide, inject, Ref, ref, watch, shallowRef }
|
|||||||
|
|
||||||
import { CURRENT_STICKY_BOTTOM, CURRENT_STICKY_TOP } from '@@/js/const.js';
|
import { CURRENT_STICKY_BOTTOM, CURRENT_STICKY_TOP } from '@@/js/const.js';
|
||||||
|
|
||||||
const rootEl = shallowRef<HTMLElement>();
|
|
||||||
const headerEl = shallowRef<HTMLElement>();
|
const headerEl = shallowRef<HTMLElement>();
|
||||||
const footerEl = shallowRef<HTMLElement>();
|
const footerEl = shallowRef<HTMLElement>();
|
||||||
const bodyEl = shallowRef<HTMLElement>();
|
|
||||||
|
|
||||||
const headerHeight = ref<string | undefined>();
|
const headerHeight = ref<string | undefined>();
|
||||||
const childStickyTop = ref(0);
|
const childStickyTop = ref(0);
|
||||||
@ -67,31 +64,11 @@ onMounted(() => {
|
|||||||
|
|
||||||
watch([parentStickyTop, parentStickyBottom], calc);
|
watch([parentStickyTop, parentStickyBottom], calc);
|
||||||
|
|
||||||
watch(childStickyTop, () => {
|
|
||||||
if (bodyEl.value == null) return;
|
|
||||||
bodyEl.value.style.setProperty('--MI-stickyTop', `${childStickyTop.value}px`);
|
|
||||||
}, {
|
|
||||||
immediate: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(childStickyBottom, () => {
|
|
||||||
if (bodyEl.value == null) return;
|
|
||||||
bodyEl.value.style.setProperty('--MI-stickyBottom', `${childStickyBottom.value}px`);
|
|
||||||
}, {
|
|
||||||
immediate: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
if (headerEl.value != null) {
|
if (headerEl.value != null) {
|
||||||
headerEl.value.style.position = 'sticky';
|
|
||||||
headerEl.value.style.top = 'var(--MI-stickyTop, 0)';
|
|
||||||
headerEl.value.style.zIndex = '1';
|
|
||||||
observer.observe(headerEl.value);
|
observer.observe(headerEl.value);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (footerEl.value != null) {
|
if (footerEl.value != null) {
|
||||||
footerEl.value.style.position = 'sticky';
|
|
||||||
footerEl.value.style.bottom = 'var(--MI-stickyBottom, 0)';
|
|
||||||
footerEl.value.style.zIndex = '1';
|
|
||||||
observer.observe(footerEl.value);
|
observer.observe(footerEl.value);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -99,8 +76,25 @@ onMounted(() => {
|
|||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
observer.disconnect();
|
observer.disconnect();
|
||||||
});
|
});
|
||||||
|
|
||||||
defineExpose({
|
|
||||||
rootEl: rootEl,
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang='scss' module>
|
||||||
|
.body {
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
--MI-stickyTop: v-bind("childStickyTop + 'px'");
|
||||||
|
--MI-stickyBottom: v-bind("childStickyBottom + 'px'");
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
position: sticky;
|
||||||
|
top: var(--MI-stickyTop, 0);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
position: sticky;
|
||||||
|
bottom: var(--MI-stickyBottom, 0);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
Loading…
Reference in New Issue
Block a user