HistoryLoadMore.vue 880 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <template>
  2. <div :class="item_klass" @click="handleClick">
  3. <div class="history-item-icon">{{ $t('conversation.history_loadmore') }}</div>
  4. </div>
  5. </template>
  6. <script setup>
  7. import { computed } from 'vue';
  8. const props = defineProps({
  9. history: Object,
  10. index: Number
  11. });
  12. const emit = defineEmits(['loadmore']);
  13. const item_klass = computed(() => {
  14. const obj = {
  15. 'conversation-history-item': true
  16. };
  17. obj['load-more'] = true;
  18. return obj;
  19. });
  20. /**
  21. * 点击事件
  22. * 分发ID值
  23. */
  24. const handleClick = () => {
  25. emit('loadmore');
  26. };
  27. </script>
  28. <style lang="css" scoped>
  29. .history-item-icon {
  30. background-color: var(--color-bg-1);
  31. padding: 20px 30px 20px 30px;
  32. border-radius: 20px;
  33. margin-top: 10px;
  34. margin-bottom: 10px;
  35. color: var(--color-text-1);
  36. display: flex;
  37. justify-content: center;
  38. align-items: center;
  39. cursor: pointer;
  40. }
  41. </style>