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

src/loading/README.md

@@ -48,6 +48,18 @@ app.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
@@ -58,6 +70,7 @@ app.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 | Text color | _string_ | `#c9c9c9` |
 | vertical | Whether to arrange icons and text content vertically | _boolean_ | `false` |
 
 ### Slots

src/loading/README.zh-CN.md

@@ -62,17 +62,30 @@ app.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 | 文字颜色                     | _string_           | `#c9c9c9`  |
+| vertical   | 是否垂直排列图标和文字内容   | _boolean_          | `false`    |
 
 ### Slots
 

src/loading/demo/index.vue

@@ -25,6 +25,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>
 </template>
 
 <script lang="ts">
@@ -37,6 +46,7 @@ const i18n = {
     size: '自定义大小',
     color: '自定义颜色',
     vertical: '垂直排列',
+    textColor: '自定义文本颜色',
   },
   'en-US': {
     type: 'Type',
@@ -44,6 +54,7 @@ const i18n = {
     size: 'Size',
     color: 'Color',
     vertical: 'Vertical',
+    textColor: 'Text Color',
   },
 };
 

src/loading/index.tsx

@@ -22,6 +22,7 @@ export default createComponent({
     color: String,
     vertical: Boolean,
     textSize: [Number, String],
+    textColor: String,
     type: {
       type: String as PropType<LoadingType>,
       default: 'circular',
@@ -41,6 +42,7 @@ export default createComponent({
             class={bem('text')}
             style={{
               fontSize: addUnit(props.textSize),
+              color: props.textColor ?? props.color,
             }}
           >
             {slots.default()}

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

@@ -183,4 +183,48 @@ exports[`should render demo and match snapshot 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 class="van-loading__circular"
+           viewbox="25 25 50 50"
+      >
+        <circle cx="50"
+                cy="50"
+                r="20"
+                fill="none"
+        >
+        </circle>
+      </svg>
+    </span>
+    <span class="van-loading__text"
+          style="color: rgb(0, 148, 255);"
+    >
+      Loading...
+    </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 class="van-loading__circular"
+           viewbox="25 25 50 50"
+      >
+        <circle cx="50"
+                cy="50"
+                r="20"
+                fill="none"
+        >
+        </circle>
+      </svg>
+    </span>
+    <span class="van-loading__text"
+          style="color: rgb(0, 148, 255);"
+    >
+      Loading...
+    </span>
+  </div>
+</div>
 `;

src/loading/test/index.spec.js

@@ -27,3 +27,43 @@ test('should change text font-size when using text-size prop', () => {
     '20px'
   );
 });
+
+test('should change text color when using text-color prop', async () => {
+  const wrapper = mount(Loading, {
+    props: {
+      textColor: 'red',
+    },
+    slots: {
+      default: () => 'Loading Text',
+    },
+  });
+
+  expect(wrapper.find('.van-loading__text').element.style.color).toBe('red');
+});
+
+test('should change text color when using color prop', async () => {
+  const wrapper = mount(Loading, {
+    props: {
+      color: 'green',
+    },
+    slots: {
+      default: () => 'Loading Text',
+    },
+  });
+
+  expect(wrapper.find('.van-loading__text').element.style.color).toBe('green');
+});
+
+test('should change text color to textColor when using color & textColor prop', async () => {
+  const wrapper = mount(Loading, {
+    props: {
+      color: 'green',
+      textColor: 'red',
+    },
+    slots: {
+      default: () => 'Loading Text',
+    },
+  });
+
+  expect(wrapper.find('.van-loading__text').element.style.color).toBe('red');
+});