localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

게시판 댓글 추가

Browse Source
This commit is contained in:
Dang 2024-12-17 12:35:30 +09:00
parent 6fb4f9ea77
commit aba42d7518
1 changed files with 35 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/board/BoardComment.vue
View File

@ -2,21 +2,29 @@
<ul class="list-unstyled"> <ul class="list-unstyled">
<li> <li>
<BoardProfile profileName=곤데리 :showDetail="false" /> <BoardProfile profileName=곤데리 :showDetail="false" />
<div>저도 궁금합니다.</div> <div class="mt-2">저도 궁금합니다.</div>
<button type="button" class="btn btn-text-primary" @click="toggleComment">답변달기</button>
<BoardComentArea v-if="comment" />
<ul class="list-unstyled twoDepth"> <ul class="list-unstyled twoDepth">
<li> <li>
<BoardProfile profileName=곤데리2 :showDetail="false" /> <BoardProfile profileName=곤데리2 :showDetail="false" />
<div>저도 궁금합니다.</div> <div class="mt-2">저도 궁금합니다.</div>
<button type="button" class="btn btn-text-primary" @click="toggleComment">답변달기</button>
<BoardComentArea v-if="comment" />
</li> </li>
</ul> </ul>
</li> </li>
<li> <li>
<BoardProfile profileName=곤데리 :showDetail="false" /> <BoardProfile profileName=곤데리 :showDetail="false" />
<div>저도 궁금합니다.</div> <div class="mt-2">저도 궁금합니다.</div>
<button type="button" class="btn btn-text-primary" @click="toggleComment">답변달기</button>
<BoardComentArea v-if="comment" />
</li> </li>
<li> <li>
<BoardProfile profileName=곤데리 :showDetail="false" :unknown="false"/> <BoardProfile profileName=곤데리 :showDetail="false" :unknown="false"/>
<div>저도 궁금합니다.</div> <div class="mt-2">저도 궁금합니다.</div>
<button type="button" class="btn btn-text-primary" @click="toggleComment">답변달기</button>
<BoardComentArea v-if="comment" />
</li> </li>
</ul> </ul>
<div>페이지네이션2</div> <div>페이지네이션2</div>
@ -25,12 +33,33 @@
<script setup> <script setup>
import BoardProfile from './BoardProfile.vue'; import BoardProfile from './BoardProfile.vue';
import BoardComentArea from './BoardComentArea.vue';
import { ref, computed } from 'vue';
const comment = ref(false);
const toggleComment = () => {
comment.value = !comment.value
};
</script> </script>
<style scoped> <style scoped>
.twoDepth { .twoDepth {
margin-top: 20px; margin-top: 10px;
padding-left: 20px; padding-left: 40px;
}
.list-unstyled > li ~ li {
margin-top: 10px;
}
.btn-text-primary {
padding-left: 0;
}
.btn-text-primary:hover,
.btn-text-primary:active,
.btn-text-primary:focus {
background-color: transparent
} }
</style> </style>