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">
<li>
<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">
<li>
<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>
</ul>
</li>
<li>
<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>
<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>
</ul>
<div>페이지네이션2</div>
@ -25,12 +33,33 @@
<script setup>
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>
<style scoped>
.twoDepth {
margin-top: 20px;
padding-left: 20px;
margin-top: 10px;
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>