62 lines
1.4 KiB
Vue
62 lines
1.4 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import Note from './Note.vue';
|
|
import { CurrentNotes, TotalNotes } from '~/services/Content';
|
|
|
|
const noteContainer = ref(null);
|
|
|
|
const computedCurrentNotes = computed(() => {
|
|
return CurrentNotes.value
|
|
.map(key => TotalNotes.value.find(note => note.key === key))
|
|
.filter(Boolean);
|
|
})
|
|
|
|
function calculateContainerWidth(){
|
|
let dom = noteContainer.value;
|
|
if (!dom) {
|
|
return;
|
|
}
|
|
|
|
dom.style.width = CurrentNotes.value.length * 701 + "px";
|
|
|
|
setTimeout(() => {
|
|
for(let i = 0; i < dom.children.length; i++){
|
|
let child = dom.children[i];
|
|
child.style.left = (40 * i) + "px";
|
|
child.style.right = (40 * (dom.children.length - i) - 700) + "px";
|
|
child.style.zIndex = i + 1;
|
|
}
|
|
}, 0);
|
|
}
|
|
|
|
watch(CurrentNotes, calculateContainerWidth);
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="note-scrolling-container" id="note-scrolling-container">
|
|
<div class="note-container" ref="noteContainer" >
|
|
<Note v-for="element in computedCurrentNotes" :key="element.key" :text="element.text" :title="element.title" :noteKey="element.key"></Note>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.note-scrolling-container {
|
|
overflow-x: auto;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-y: none;
|
|
}
|
|
|
|
.note-container {
|
|
display: flex;
|
|
height: 100%;
|
|
margin: 0;
|
|
background-color: var(--color-background);
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
</style>
|