refactor: branch form

This commit is contained in:
puriphatt 2024-08-01 08:44:40 +00:00 committed by Net
parent a1f691a613
commit fb076fc074
15 changed files with 651 additions and 274 deletions

View file

@ -23,7 +23,7 @@ const props = defineProps<{
};
}>();
const scrollElement = ref<Element | HTMLElement>();
const currentScrollElement = ref<Element | HTMLElement>();
function handleClick(menu: Menu) {
const element = document.getElementById(menu.anchor);
@ -41,9 +41,9 @@ const activeMenu = ref(props.menu.at(0)?.anchor || '');
function onScroll() {
let current = '';
if (!scrollElement.value) return;
if (!currentScrollElement.value) return;
const container = scrollElement.value;
const container = currentScrollElement.value;
props.menu.forEach((v) => {
if (!v.element) v.element = document.getElementById(v.anchor) || undefined;
@ -56,22 +56,21 @@ function onScroll() {
current = v.anchor;
}
});
activeMenu.value = current;
}
onMounted(() => {
if (typeof props.scrollElement === 'string' || !props.scrollElement) {
const element = document.querySelector(props.scrollElement || 'body');
if (element) scrollElement.value = element;
if (element) currentScrollElement.value = element;
} else {
scrollElement.value = props.scrollElement;
currentScrollElement.value = props.scrollElement;
}
scrollElement.value?.addEventListener('scroll', onScroll);
currentScrollElement.value?.addEventListener('scroll', onScroll);
});
onUnmounted(() => {
scrollElement.value?.removeEventListener('scroll', onScroll);
currentScrollElement.value?.removeEventListener('scroll', onScroll);
});
</script>
@ -87,6 +86,7 @@ onUnmounted(() => {
class="side-menu__item"
:class="{ 'side-menu__active': activeMenu === v.anchor }"
v-for="v in menu"
:key="v.anchor"
@click="handleClick(v)"
>
{{ v.name }}