feat: loading add fullscreen property (#3427)

* feat: loading add fullscreen property

* feat: loading add fullscreen property

* fix: rebase

* feat: rebase

* fix: 更新测试用例

* feat: 添加背景色和层级变量，文档和用例修复

* docs: sync api

* chore: optimize code

---------

Co-authored-by: anlyyao <anly_yaw@163.com>

src/image-viewer/__test__/__snapshots__/index.test.js.snap

@@ -21,8 +21,8 @@ exports[`image-viewer :base 1`] = `
         tClassText="t-image--loading-text"
       >
         <wx-view
-          class="class t-class t-loading t-loading--horizontal"
-          style="width: 44rpx; height: 44rpx; color: inherit;"
+          class="class t-class t-loading t-loading--horizontal "
+          style="color: inherit;"
         >
           <wx-view
             ariaLabel="加载中"
@@ -90,8 +90,8 @@ exports[`image-viewer :base 2`] = `
         tClassText="t-image--loading-text"
       >
         <wx-view
-          class="class t-class t-loading t-loading--horizontal"
-          style="width: 44rpx; height: 44rpx; color: inherit;"
+          class="class t-class t-loading t-loading--horizontal "
+          style="color: inherit;"
         >
           <wx-view
             ariaLabel="加载中"
@@ -159,8 +159,8 @@ exports[`image-viewer :base 3`] = `
         tClassText="t-image--loading-text"
       >
         <wx-view
-          class="class t-class t-loading t-loading--horizontal"
-          style="width: 44rpx; height: 44rpx; color: inherit;"
+          class="class t-class t-loading t-loading--horizontal "
+          style="color: inherit;"
         >
           <wx-view
             ariaLabel="加载中"

src/image/__test__/__snapshots__/index.test.js.snap

@@ -17,8 +17,8 @@ exports[`image :base 1`] = `
           tClassText="t-image--loading-text"
         >
           <wx-view
-            class="class t-class t-loading t-loading--horizontal"
-            style="width: 44rpx; height: 44rpx; color: inherit;"
+            class="class t-class t-loading t-loading--horizontal "
+            style="color: inherit;"
           >
             <wx-view
               ariaLabel="加载中"

src/loading/README.en-US.md

@@ -10,16 +10,18 @@ style | Object | - | CSS(Cascading Style Sheets) | N
 custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
 delay | Number | 0 | \- | N
 duration | Number | 800 | \- | N
+fullscreen | Boolean | false | `1.8.5` | N
 indicator | Boolean / Slot | true | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 inherit-color | Boolean | false | \- | N
 layout | String | horizontal | options: horizontal/vertical | N
 loading | Boolean | true | \- | N
 pause | Boolean | false | \- | N
 progress | Number | - | \- | N
 reverse | Boolean | - | \- | N
-size | String | '40rpx' | \- | N
+size | String | '20px' | \- | N
 text | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 theme | String | circular | options: circular/spinner/dots | N
+
 ### Loading External Classes
 
 className | Description

src/loading/README.md

@@ -66,16 +66,18 @@ style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
 delay | Number | 0 | 延迟显示加载效果的时间，用于防止请求速度过快引起的加载闪烁，单位：毫秒 | N
 duration | Number | 800 | 加载动画执行完成一次的时间，单位：毫秒 | N
+fullscreen | Boolean | false | `1.8.5`。是否显示为全屏加载 | N
 indicator | Boolean / Slot | true | 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 inherit-color | Boolean | false | 是否继承父元素颜色 | N
 layout | String | horizontal | 对齐方式。可选项：horizontal/vertical | N
 loading | Boolean | true | 是否处于加载状态 | N
 pause | Boolean | false | 是否暂停动画 | N
 progress | Number | - | 加载进度 | N
 reverse | Boolean | - | 加载动画是否反向 | N
-size | String | '40rpx' | 尺寸，示例：40rpx/20px | N
+size | String | '20px' | 尺寸，示例：20px | N
 text | String / Slot | - | 加载提示文案。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
 theme | String | circular | 加载组件类型。可选项：circular/spinner/dots，skyline 模式下暂不支持枚举值 circular | N
+
 ### Loading External Classes
 
 类名 | 描述

src/loading/loading.less

@@ -6,13 +6,29 @@
 @loading-text-color: var(--td-loading-text-color, @text-color-primary);
 @loading-text-font-size: var(--td-loading-text-font-size, 24rpx);
 @loading-text-line-height: var(--td-loading-text-line-height, 40rpx);
+@loading-z-index: var(--td-loading-z-index, 3500);
+@loading-full-bg-color: var(--td-loading-full-bg-color, rgba(255, 255, 255, 0.6));
 
 .@{loading} {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 24rpx;
 
+  &--fullscreen {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    vertical-align: middle;
+    justify-content: center;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: @loading-z-index;
+    background-color: @loading-full-bg-color;
+  }
+
   &__spinner {
     position: relative;
     box-sizing: border-box;

src/loading/loading.wxml

@@ -1,7 +1,7 @@
 <wxs src="../common/utils.wxs" module="_" />
 <view
-  style="{{_._style([style, customStyle, !text ? ('width: ' + _.addUnit(size) + '; height: ' + _.addUnit(size)) : '', show ? '' : 'display: none', inheritColor ? 'color: inherit' : ''])}}"
-  class="class {{prefix}}-class {{classPrefix}} {{classPrefix + '--' + layout}}"
+  style="{{_._style([style, customStyle, show ? '' : 'display: none', inheritColor ? 'color: inherit' : ''])}}"
+  class="class {{prefix}}-class {{classPrefix}} {{classPrefix + '--' + layout}} {{fullscreen ? classPrefix + '--fullscreen' : ''}}"
 >
   <view
     wx:if="{{indicator}}"

src/loading/props.ts

@@ -16,9 +16,10 @@ const props: TdLoadingProps = {
     type: Number,
     value: 800,
   },
-  /** 组件类名，分别用于设置加载组件外层元素，加载组件文本，加载组件指示符，加载指示符内侧同心圆等元素类名 */
-  externalClasses: {
-    type: Array,
+  /** 是否显示为全屏加载 */
+  fullscreen: {
+    type: Boolean,
+    value: false,
   },
   /** 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符 */
   indicator: {
@@ -53,10 +54,10 @@ const props: TdLoadingProps = {
   reverse: {
     type: Boolean,
   },
-  /** 尺寸，示例：40rpx/20px */
+  /** 尺寸，示例：20px */
   size: {
     type: String,
-    value: '40rpx',
+    value: '20px',
   },
   /** 加载提示文案 */
   text: {

src/loading/type.ts

@@ -22,11 +22,12 @@ export interface TdLoadingProps {
     value?: number;
   };
   /**
-   * 组件类名，分别用于设置加载组件外层元素，加载组件文本，加载组件指示符，加载指示符内侧同心圆等元素类名
+   * 是否显示为全屏加载
+   * @default false
    */
-  externalClasses?: {
-    type: ArrayConstructor;
-    value?: ['t-class', 't-class-text', 't-class-indicator'];
+  fullscreen?: {
+    type: BooleanConstructor;
+    value?: boolean;
   };
   /**
    * 加载指示符，值为 true 显示默认指示符，值为 false 则不显示，也可以自定义指示符
@@ -83,8 +84,8 @@ export interface TdLoadingProps {
     value?: boolean;
   };
   /**
-   * 尺寸，示例：40rpx/20px
-   * @default '40rpx'
+   * 尺寸，示例：20px
+   * @default '20px'
    */
   size?: {
     type: StringConstructor;