fs-loadmore.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <template>
  2. <view>
  3. <slot></slot>
  4. <fs-empty v-if="!state.loading && !state.dataList.length"></fs-empty>
  5. <template v-else>
  6. <fs-divider v-if="!state.hasMore">{{ nomore }}</fs-divider>
  7. </template>
  8. </view>
  9. </template>
  10. <script>
  11. /**
  12. * 加载更多组件
  13. * @description 加载更多组件
  14. * @property {Function} fetchList 获取数据的方法
  15. * @property {Number} pageSize 分页大小
  16. * @property {Boolean} pullDownRefresh 是否开启下拉刷新
  17. * @property {Boolean} autoCall 是否自动调用查询方法
  18. * @property {String} nomore 没有更多文字
  19. */
  20. export default {
  21. name: 'fs-loadmore'
  22. }
  23. </script>
  24. <script setup>
  25. import { reactive, toRef } from 'vue'
  26. const props = defineProps({
  27. modelValue: {
  28. type: Array,
  29. default() {
  30. return []
  31. }
  32. },
  33. fetchList: Function,
  34. pageSize: {
  35. type: Number,
  36. default: 20
  37. },
  38. pullDownRefresh: Boolean,
  39. autoCall: {
  40. type: Boolean,
  41. default: true
  42. },
  43. nomore: {
  44. type: String,
  45. default: '没有更多了~'
  46. }
  47. })
  48. const emits = defineEmits(['update:modelValue'])
  49. const state = reactive({
  50. loading: true,
  51. dataList: props.modelValue,
  52. pageNo: 1,
  53. pageSize: props.pageSize,
  54. hasMore: true
  55. })
  56. const query = loadmore => {
  57. state.loading = true
  58. if (loadmore) {
  59. state.pageNo++
  60. } else {
  61. state.pageNo = 1
  62. }
  63. return props
  64. .fetchList({
  65. pageNo: state.pageNo,
  66. pageSize: props.pageSize
  67. })
  68. .then(res => {
  69. state.hasMore = res.length >= state.pageSize
  70. state.dataList = loadmore ? [...state.dataList, ...res] : res
  71. emits('update:modelValue', state.dataList)
  72. })
  73. .finally(() => {
  74. state.loading = false
  75. })
  76. }
  77. props.autoCall && query()
  78. const refresh = () => {
  79. state.dataList = []
  80. emits('update:modelValue', state.dataList)
  81. return query()
  82. }
  83. defineExpose({
  84. query,
  85. refresh,
  86. hasMore: toRef(state, 'hasMore'),
  87. pullDownRefresh: props.pullDownRefresh
  88. })
  89. </script>
  90. <style></style>