diff --git a/packages/vant/src/loading/Loading.tsx b/packages/vant/src/loading/Loading.tsx index 42a900dfc..c1520ab02 100644 --- a/packages/vant/src/loading/Loading.tsx +++ b/packages/vant/src/loading/Loading.tsx @@ -43,6 +43,15 @@ export default defineComponent({ extend({ color: props.color }, getSizeStyle(props.size)) ); + const renderIcon = () => { + const DefaultIcon = props.type === 'spinner' ? SpinIcon : CircularIcon; + return ( + + {slots.icon ? slots.icon() : DefaultIcon} + + ); + }; + const renderText = () => { if (slots.default) { return ( @@ -67,9 +76,7 @@ export default defineComponent({ aria-live="polite" aria-busy={true} > - - {type === 'spinner' ? SpinIcon : CircularIcon} - + {renderIcon()} {renderText()} ); diff --git a/packages/vant/src/loading/README.md b/packages/vant/src/loading/README.md index f986c83f9..0c61a9a0d 100644 --- a/packages/vant/src/loading/README.md +++ b/packages/vant/src/loading/README.md @@ -66,6 +66,19 @@ use `color` or `text-color` to change text color. ``` +### Custom Icon + +Use `icon` slot to custom icon. + +```html + + + Loading... + +``` + ## API ### Props @@ -81,9 +94,10 @@ use `color` or `text-color` to change text color. ### Slots -| Name | Description | -| ------- | ------------ | -| default | Loading text | +| Name | Description | +| ------- | ------------------- | +| default | Loading text | +| icon | Custom loading icon | ### Types diff --git a/packages/vant/src/loading/README.zh-CN.md b/packages/vant/src/loading/README.zh-CN.md index 4ac7c86de..125b5fd29 100644 --- a/packages/vant/src/loading/README.zh-CN.md +++ b/packages/vant/src/loading/README.zh-CN.md @@ -76,6 +76,19 @@ app.use(Loading); ``` +### 自定义图标 + +通过 `icon` 插槽可以自定义加载图标。 + +```html + + + 加载中... + +``` + ## API ### Props @@ -91,9 +104,10 @@ app.use(Loading); ### Slots -| 名称 | 说明 | -| ------- | -------- | -| default | 加载文案 | +| 名称 | 说明 | +| ------- | -------------- | +| default | 加载文案 | +| icon | 自定义加载图标 | ### 类型定义 diff --git a/packages/vant/src/loading/demo/index.vue b/packages/vant/src/loading/demo/index.vue index 327cae667..6f4f2f613 100644 --- a/packages/vant/src/loading/demo/index.vue +++ b/packages/vant/src/loading/demo/index.vue @@ -1,4 +1,5 @@ @@ -58,6 +61,15 @@ const t = useTranslate({ {{ t('loading') }} + + + + + {{ t('loading') }} + +