feat(Loading): add text-color prop (#7846)

src/loading/README.md

@@ -47,6 +47,18 @@ Vue.use(Loading);
 <van-loading size="24px" vertical>Loading...</van-loading>
 ```
 
+### Text Color
+
+use `color` or `text-color` to change text color.
+
+```html
+<!-- the color of text and icon will be changed -->
+<van-loading color="#0094ff" />
+
+<!-- only change text color -->
+<van-loading text-color="#0094ff" />
+```
+
 ## API
 
 ### Props
@@ -57,6 +69,7 @@ Vue.use(Loading);
 | type | Can be set to `spinner` | _string_ | `circular` |
 | size | Icon size | _number \| string_ | `30px` |
 | text-size | Text font size | _number \| string_ | `14px` |
+| text-color `v2.12.2` | Text color | _string_ | `#c9c9c9` |
 | vertical | Whether to arrange icons and text content vertically | _boolean_ | `false` |
 
 ### Slots

src/loading/README.zh-CN.md

@@ -61,17 +61,30 @@ Vue.use(Loading);
 <van-loading size="24px" vertical>加载中...</van-loading>
 ```
 
+### 自定义文案颜色
+
+通过 `color` 或者 `text-color` 属性设置加载文案的颜色。
+
+```html
+<!-- 可修改文案和加载图标的颜色 -->
+<van-loading color="#0094ff" />
+
+<!-- 只修改文案颜色 -->
+<van-loading text-color="#0094ff" />
+```
+
 ## API
 
 ### Props
 
-| 参数      | 说明                         | 类型               | 默认值     |
-| --------- | ---------------------------- | ------------------ | ---------- |
-| color     | 颜色                         | _string_           | `#c9c9c9`  |
-| type      | 类型，可选值为 `spinner`     | _string_           | `circular` |
-| size      | 加载图标大小，默认单位为`px` | _number \| string_ | `30px`     |
-| text-size | 文字大小，默认单位为`px`     | _number \| string_ | `14px`     |
-| vertical  | 是否垂直排列图标和文字内容   | _boolean_          | `false`    |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| color | 颜色 | _string_ | `#c9c9c9` |
+| type | 类型，可选值为 `spinner` | _string_ | `circular` |
+| size | 加载图标大小，默认单位为 `px` | _number \| string_ | `30px` |
+| text-size | 文字大小，默认单位为 `px` | _number \| string_ | `14px` |
+| text-color `v2.12.2` | 文字颜色 | _string_ | `#c9c9c9` |
+| vertical | 是否垂直排列图标和文字内容 | _boolean_ | `false` |
 
 ### Slots
 

src/loading/demo/index.vue

@@ -26,6 +26,15 @@
         {{ t('loading') }}
       </van-loading>
     </demo-block>
+
+    <demo-block :title="t('textColor')">
+      <van-loading size="24px" vertical color="#0094ff">
+        {{ t('loading') }}
+      </van-loading>
+      <van-loading size="24px" vertical text-color="#0094ff">
+        {{ t('loading') }}
+      </van-loading>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -38,6 +47,7 @@ export default {
       size: '自定义大小',
       color: '自定义颜色',
       vertical: '垂直排列',
+      textColor: '自定义文本颜色',
     },
     'en-US': {
       type: 'Type',
@@ -45,6 +55,7 @@ export default {
       size: 'Size',
       color: 'Color',
       vertical: 'Vertical',
+      textColor: 'Text Color',
     },
   },
 };

src/loading/index.tsx

@@ -14,6 +14,7 @@ export type LoadingProps = {
   color: string;
   vertical?: boolean;
   textSize?: string | number;
+  textColor?: string;
 };
 
 const [createComponent, bem] = createNamespace('loading');
@@ -40,8 +41,9 @@ function LoadingText(
   slots: DefaultSlots
 ) {
   if (slots.default) {
-    const style = props.textSize && {
+    const style = {
       fontSize: addUnit(props.textSize),
+      color: props.textColor ?? props.color,
     };
 
     return (
@@ -85,6 +87,7 @@ Loading.props = {
   size: [Number, String],
   vertical: Boolean,
   textSize: [Number, String],
+  textColor: String,
   type: {
     type: String,
     default: 'circular',

src/loading/test/__snapshots__/demo.spec.js.snap

@@ -24,5 +24,13 @@ exports[`renders demo correctly 1`] = `
       加载中...
     </span></div>
   </div>
+  <div>
+    <div class="van-loading van-loading--circular van-loading--vertical"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(0, 148, 255); width: 24px; height: 24px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text" style="color: rgb(0, 148, 255);">
+      加载中...
+    </span></div>
+    <div class="van-loading van-loading--circular van-loading--vertical"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 24px; height: 24px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span><span class="van-loading__text" style="color: rgb(0, 148, 255);">
+      加载中...
+    </span></div>
+  </div>
 </div>
 `;