From ee08e9f51e5079a0a1ba1ff2f109ae72c3f19dd7 Mon Sep 17 00:00:00 2001
From: FineArchs <133759614+FineArchs@users.noreply.github.com>
Date: Sat, 12 Oct 2024 11:20:55 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20MkStickyContainer=E3=81=A7<style=20?=
=?UTF-8?q?/>=E3=82=92=E4=BD=BF=E3=81=86=20(#14755)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* 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>
---
.../components/global/MkStickyContainer.vue | 56 +++++++++----------
1 file changed, 25 insertions(+), 31 deletions(-)
diff --git a/packages/frontend/src/components/global/MkStickyContainer.vue b/packages/frontend/src/components/global/MkStickyContainer.vue
index cb21dafd2b..2763ecadd6 100644
--- a/packages/frontend/src/components/global/MkStickyContainer.vue
+++ b/packages/frontend/src/components/global/MkStickyContainer.vue
@@ -4,19 +4,18 @@ SPDX-License-Identifier: AGPL-3.0-only
-->
<template>
-<div ref="rootEl">
- <div ref="headerEl">
+<div>
+ <div ref="headerEl" :class="$style.header">
<slot name="header"></slot>
</div>
<div
- ref="bodyEl"
+ :class="$style.body"
:data-sticky-container-header-height="headerHeight"
:data-sticky-container-footer-height="footerHeight"
- style="position: relative; z-index: 0;"
>
<slot></slot>
</div>
- <div ref="footerEl">
+ <div ref="footerEl" :class="$style.footer">
<slot name="footer"></slot>
</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';
-const rootEl = shallowRef<HTMLElement>();
const headerEl = shallowRef<HTMLElement>();
const footerEl = shallowRef<HTMLElement>();
-const bodyEl = shallowRef<HTMLElement>();
const headerHeight = ref<string | undefined>();
const childStickyTop = ref(0);
@@ -67,31 +64,11 @@ onMounted(() => {
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) {
- headerEl.value.style.position = 'sticky';
- headerEl.value.style.top = 'var(--MI-stickyTop, 0)';
- headerEl.value.style.zIndex = '1';
observer.observe(headerEl.value);
}
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);
}
});
@@ -99,8 +76,25 @@ onMounted(() => {
onUnmounted(() => {
observer.disconnect();
});
-
-defineExpose({
- rootEl: rootEl,
-});
</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>
--
GitLab