90 lines
2.6 KiB
Vue
90 lines
2.6 KiB
Vue
<template v-if="isRecommend">
|
|
<button
|
|
class="btn btn-label-primary btn-icon me-1"
|
|
:class="{ clicked: likeClicked, big: bigBtn, active: props.likeClicked }"
|
|
@click="handleLike"
|
|
>
|
|
<i class="fa-regular fa-thumbs-up"></i> <span class="ms-1">{{ likeCount }}</span>
|
|
</button>
|
|
<button
|
|
class="btn btn-label-danger btn-icon"
|
|
:class="{ clicked: dislikeClicked, big: bigBtn, active: props.dislikeClicked }"
|
|
@click="handleDislike"
|
|
>
|
|
<i class="fa-regular fa-thumbs-down"></i> <span class="ms-1">{{ dislikeCount }}</span>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, watch } from 'vue';
|
|
|
|
const props = defineProps({
|
|
comment: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
likeClicked: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
dislikeClicked: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
bigBtn: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isRecommend: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
boardId: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
commentId: {
|
|
type: [Number, null],
|
|
default: null,
|
|
},
|
|
likeCount: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
dislikeCount: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['updateReaction']);
|
|
|
|
const likeClicked = ref(props.likeClicked);
|
|
const dislikeClicked = ref(props.dislikeClicked);
|
|
const likeCount = computed(() => props.comment?.likeCount ?? props.likeCount);
|
|
const dislikeCount = computed(() => props.comment?.dislikeCount ?? props.dislikeCount);
|
|
|
|
watch([() => props.likeClicked, () => props.dislikeClicked], ([likeNewval, dislikeNewval]) => {
|
|
likeClicked.value = likeNewval;
|
|
dislikeClicked.value = dislikeNewval;
|
|
});
|
|
|
|
const handleLike = () => {
|
|
const isLike = !likeClicked.value;
|
|
const isDislike = false;
|
|
|
|
emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
|
|
likeClicked.value = isLike;
|
|
dislikeClicked.value = false;
|
|
};
|
|
|
|
const handleDislike = () => {
|
|
const isDislike = !dislikeClicked.value;
|
|
const isLike = false;
|
|
|
|
emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
|
|
dislikeClicked.value = isDislike;
|
|
likeClicked.value = false;
|
|
};
|
|
</script>
|