68 lines
1.5 KiB
Vue
68 lines
1.5 KiB
Vue
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import Note from './Note.vue';
|
|
|
|
const emitter = useEmitter();
|
|
|
|
let noteData = ref([]);
|
|
|
|
const noteContainer = ref(null);
|
|
|
|
function calculateContainerWidth(){
|
|
let dom = noteContainer.value;
|
|
dom.style.width = noteData.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);
|
|
}
|
|
|
|
function pushNote(note){
|
|
noteData.value.push(note);
|
|
calculateContainerWidth();
|
|
}
|
|
|
|
emitter.on("push-note", (note) => {
|
|
pushNote(note);
|
|
})
|
|
|
|
emitter.on("delete-note", (key) => {
|
|
noteData.value = noteData.value.filter((note) => {
|
|
return note.key !== key;
|
|
});
|
|
calculateContainerWidth();
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="note-scrolling-container" id="note-scrolling-container">
|
|
<div class="note-container" ref="noteContainer" >
|
|
<Note v-for="element in noteData" :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;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
<style>
|
|
</style> |