comment.vue 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. <script setup lang="ts">
  2. import { onMounted, ref } from 'vue'
  3. import service from '../../plugins/axios'
  4. import commentitem from '../../components/post/commentitem.vue'
  5. const { postid } = defineProps({
  6. postid: {
  7. type: String,
  8. required: true,
  9. },
  10. })
  11. const page = async (v: number) => {
  12. data.value = (
  13. await service.get(`/comment?postId=${postid}&page=${v}&limit=10`)
  14. ).data
  15. }
  16. const data = ref(
  17. (await service.get(`/comment?postId=${postid}&page=${1}&limit=10`)).data
  18. )
  19. </script>
  20. <template>
  21. <el-empty description="还没有人评论呢?"
  22. v-show="!(data.total > 0)" />
  23. <Suspense v-for="(item,i) of data.data"
  24. :key="i">
  25. <template #default>
  26. <commentitem :id="item.id"
  27. :content="item.content"
  28. :authorid="item.authorId"
  29. :time="item.updatedAt" />
  30. </template>
  31. <template #fallback>
  32. <el-skeleton />
  33. </template>
  34. </Suspense>
  35. <!-- 分割线 -->
  36. <el-divider />
  37. <el-pagination layout="prev, pager, next"
  38. :page-count="data.totalPage"
  39. @current-change="page" />
  40. </template>
  41. <style scoped >
  42. </style>