feat: ✨ Loadmore提供loadingProps属性用于自定义loading样式

Author: Moonofweisheng

docs/component/loadmore.md

@@ -126,6 +126,10 @@ image {
 | loading-text  | 加载提示文案         | string | -                      | 加载中...          | -        |
 | finished-text | 全部加载完的提示文案 | string | -                      | 没有更多了         | -        |
 | error-text    | 加载失败的提示文案   | string | -                      | 加载失败，点击重试 | -        |
+| loading-props  | loading加载组件属性| `Partial<LoadingProps>` | -         | -       | $LOWEST_VERSION$        |
+
+#### LoadingProps
+参见[LoadingProps](/component/loading.html#attributes)
 
 ## Events
 

src/uni_modules/wot-design-uni/components/wd-loadmore/types.ts

@@ -1,5 +1,6 @@
 import type { PropType } from 'vue'
-import { baseProps, makeStringProp } from '../common/props'
+import { baseProps } from '../common/props'
+import type { LoadingProps } from '../wd-loading/types'
 
 export type LoadMoreState = 'loading' | 'error' | 'finished'
 
@@ -20,5 +21,10 @@ export const loadmoreProps = {
   /**
    * 加载失败的提示文案
    */
-  errorText: String
+  errorText: String,
+  /**
+   * 加载中loading组件的属性
+   * 参考loading组件
+   */
+  loadingProps: Object as PropType<Partial<LoadingProps>>
 }

src/uni_modules/wot-design-uni/components/wd-loadmore/wd-loadmore.vue

@@ -1,3 +1,12 @@
+<!--
+ * @Author: weisheng
+ * @Date: 2024-11-09 12:35:25
+ * @LastEditTime: 2024-11-09 15:01:32
+ * @LastEditors: weisheng
+ * @Description: 
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-loadmore/wd-loadmore.vue
+ * 记得注释
+-->
 <template>
   <view :class="['wd-loadmore', customClass]" :style="customStyle" @click="reload">
     <wd-divider v-if="state === 'finished'">{{ finishedText || translate('finished') }}</wd-divider>
@@ -7,7 +16,7 @@
       <wd-icon name="refresh" custom-class="wd-loadmore__refresh" />
     </block>
     <block v-if="state === 'loading'">
-      <wd-loading custom-class="wd-loadmore__loading" />
+      <wd-loading v-bind="customLoadingProps" />
       <text class="wd-loadmore__text">{{ loadingText || translate('loading') }}</text>
     </block>
   </view>
@@ -28,9 +37,17 @@ export default {
 import wdDivider from '../wd-divider/wd-divider.vue'
 import wdLoading from '../wd-loading/wd-loading.vue'
 import wdIcon from '../wd-icon/wd-icon.vue'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useTranslate } from '../composables/useTranslate'
 import { loadmoreProps, type LoadMoreState } from './types'
+import type { LoadingProps } from '../wd-loading/types'
+import { isDef, isUndefined, omitBy } from '../common/util'
+
+const customLoadingProps = computed(() => {
+  const loadingProps: Partial<LoadingProps> = isDef(props.loadingProps) ? omitBy(props.loadingProps, isUndefined) : {}
+  loadingProps.customClass = `wd-loadmore__loading ${loadingProps.customClass || ''}`
+  return loadingProps
+})
 
 const props = defineProps(loadmoreProps)
 const emit = defineEmits(['reload'])