Docs/progress 修复首次进入时与设置的stroke-width的延迟显示和兼容性问题

src/image/README.en-US.md

@@ -32,6 +32,8 @@ className | Description
 -- | --
 t-class | \-
 t-class-load | \-
+t-class-image | \-
+t-class-error | \-
 
 ### CSS Variables
 

src/image/README.md

@@ -77,6 +77,8 @@ load | - | 图片加载完成时触发
 -- | --
 t-class | 根节点样式类
 t-class-load | 加载样式类
+t-class-image | 图片样式类
+t-class-error | 加载失败样式类
 
 ### CSS Variables
 

src/image/image.less

@@ -5,13 +5,14 @@
 @image-loading-color: var(--td-image-loading-color, @text-color-placeholder);
 @image-round-radius: var(--td-image-round-radius, @radius-default);
 
-:host {
+.@{prefix}-image {
   position: relative;
-}
+  display: inline-block;
 
-.@{prefix}-image {
-  color: @image-color;
-  vertical-align: top;
+  &__img {
+    color: @image-color;
+    vertical-align: top;
+  }
 
   &__mask {
     display: flex;
@@ -34,6 +35,7 @@
   &--lazy {
     position: absolute;
     top: 0;
+    left: 0;
     z-index: -1;
   }
 

src/image/image.ts

@@ -7,7 +7,7 @@ const { prefix } = config;
 const name = `${prefix}-image`;
 @wxComponent()
 export default class Image extends SuperComponent {
-  externalClasses = [`${prefix}-class`, `${prefix}-class-load`];
+  externalClasses = [`${prefix}-class`, `${prefix}-class-load`, `${prefix}-class-image`, `${prefix}-class-error`];
 
   options = {
     multipleSlots: true,

src/image/image.wxml

@@ -1,52 +1,56 @@
 <wxs src="../common/utils.wxs" module="_" />
 
-<!-- 加载中占位 -->
-<view
-  wx:if="{{isLoading}}"
-  style="{{_._style([innerStyle, style, customStyle])}}"
-  class="class {{prefix}}-class {{classPrefix}} {{classPrefix}}__mask {{classPrefix}}--loading {{classPrefix}}--shape-{{shape}}"
-  aria-hidden="{{ariaHidden}}"
->
-  <t-loading
-    wx:if="{{loading === 'default'}}"
-    theme="dots"
-    size="44rpx"
-    loading
-    inherit-color
-    t-class="t-class-load"
-    t-class-text="{{classPrefix}}--loading-text"
-  ></t-loading>
-  <view wx:elif="{{loading !== '' && loading !== 'slot'}}" class="{{classPrefix}}__common {{prefix}}-class-load">
-    {{loading}}
+<view class="class {{prefix}}-class {{classPrefix}}">
+  <!-- 加载中占位 -->
+  <view
+    wx:if="{{isLoading}}"
+    style="{{_._style([innerStyle, style, customStyle])}}"
+    class="{{classPrefix}}__img {{classPrefix}}__mask {{classPrefix}}--loading {{classPrefix}}--shape-{{shape}}"
+    aria-hidden="{{ariaHidden}}"
+  >
+    <t-loading
+      wx:if="{{loading === 'default'}}"
+      theme="dots"
+      size="44rpx"
+      loading
+      inherit-color
+      t-class="t-class-load"
+      t-class-text="{{classPrefix}}--loading-text"
+    ></t-loading>
+    <view wx:elif="{{loading !== '' && loading !== 'slot'}}" class="{{classPrefix}}__common {{prefix}}-class-load">
+      {{loading}}
+    </view>
+    <slot wx:else name="loading" />
   </view>
-  <slot wx:else name="loading" />
-</view>
-<!-- 加载失败占位 -->
-<view
-  wx:elif="{{isFailed}}"
-  style="{{_._style([innerStyle, style, customStyle])}}"
-  class="class {{prefix}}-class {{classPrefix}} {{classPrefix}}__mask {{classPrefix}}--failed {{classPrefix}}--shape-{{shape}}"
-  aria-hidden="{{ariaHidden}}"
->
-  <view wx:if="{{error === 'default'}}" style="font-size: 44rpx" class="{{prefix}}-class-load">
-    <t-icon name="close" aria-role="img" aria-label="加载失败" />
+  <!-- 加载失败占位 -->
+  <view
+    wx:elif="{{isFailed}}"
+    style="{{_._style([innerStyle, style, customStyle])}}"
+    class="{{classPrefix}}__img {{prefix}}-class-error {{classPrefix}}__mask {{classPrefix}}--failed {{classPrefix}}--shape-{{shape}}"
+    aria-hidden="{{ariaHidden}}"
+  >
+    <view wx:if="{{error === 'default'}}" style="font-size: 44rpx" class="{{prefix}}-class-load">
+      <t-icon name="close" aria-role="img" aria-label="加载失败" />
+    </view>
+    <view wx:elif="{{error && error !== 'slot'}}" class="{{classPrefix}}__common {{prefix}}-class-load">
+      {{error}}
+    </view>
+    <slot wx:else name="error" />
   </view>
-  <view wx:elif="{{error && error !== 'slot'}}" class="{{classPrefix}}__common {{prefix}}-class-load"> {{error}} </view>
-  <slot wx:else name="error" />
+  <!-- 图片 -->
+  <image
+    id="{{tId||'image'}}"
+    wx:if="{{ !isFailed }}"
+    class="{{classPrefix}}__img {{classPrefix}}--shape-{{shape}} {{isLoading ? classPrefix + '--lazy' : ''}}"
+    src="{{src}}"
+    style="{{_._style([innerStyle, style, customStyle])}}"
+    mode="{{mode}}"
+    webp="{{webp}}"
+    lazy-load="{{lazy}}"
+    bind:load="onLoaded"
+    bind:error="onLoadError"
+    show-menu-by-longpress="{{showMenuByLongpress}}"
+    aria-hidden="{{ariaHidden || isLoading || isFailed}}"
+    aria-label="{{ariaLabel}}"
+  />
 </view>
-<!-- 图片 -->
-<image
-  id="{{tId||'image'}}"
-  wx:if="{{ !isFailed }}"
-  class="class {{prefix}}-class {{classPrefix}} {{classPrefix}}--shape-{{shape}} {{isLoading ? classPrefix + '--lazy' : ''}}"
-  src="{{src}}"
-  style="{{_._style([innerStyle, style, customStyle])}}"
-  mode="{{mode}}"
-  webp="{{webp}}"
-  lazy-load="{{lazy}}"
-  bind:load="onLoaded"
-  bind:error="onLoadError"
-  show-menu-by-longpress="{{showMenuByLongpress}}"
-  aria-hidden="{{ariaHidden || isLoading || isFailed}}"
-  aria-label="{{ariaLabel}}"
-/>

src/progress/progress.ts

@@ -2,7 +2,7 @@
 import config from '../common/config';
 import props from './props';
 import { getBackgroundColor } from './utils';
 import { unitConvert, getRect } from '../common/utils';
 
 const { prefix } = config;
 const name = `${prefix}-progress`;
@@ -67,11 +67,6 @@
       });
     },
 
-    theme(theme) {
-      if (theme === 'circle') {
-        this.getInnerDiameter();
-      }
-    },
 
     trackColor(trackColor) {
       this.setData({
@@ -80,17 +75,4 @@
     },
   };
 
-  methods = {
-    getInnerDiameter() {
-      const { strokeWidth } = this.properties;
-      const wrapID = `.${name}__canvas--circle`;
-      if (strokeWidth) {
-        getRect(this, wrapID).then((wrapRect) => {
-          this.setData({
-            innerDiameter: wrapRect.width - unitConvert(strokeWidth) * 2,
-          });
-        });
-      }
-    },
-  };
 }

src/progress/progress.wxml

@@ -80,7 +80,7 @@
     >
       <view
         class="{{classPrefix}}__canvas--inner {{prefix}}-class-bar"
-        style="{{innerDiameter? 'width:'+ innerDiameter*2 + 'rpx;' + 'height:'+ innerDiameter*2 + 'rpx;': ''}}"
+        style="{{heightBar? '--td-progress-stroke-circle-width:' + heightBar + 'px' : ''}}"
       >
         <view wx:if="{{label}}" class="{{classPrefix}}__info {{prefix}}-class-label" aria-hidden="{{ true }}">
           <template