feat(Image): add props tId (#2658)

* feat(image): props-t-id

* docs(image): props-t-id

Author: catiwang

src/image/README.en-US.md

@@ -1,10 +1,12 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Image Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+t-id | String | - | `1.2.10`. image tag id | N
 error | String / Slot | 'default' | \- | N
 external-classes | Array | - | `['t-class', 't-class-load']` | N
 height | String / Number | - | \- | N
@@ -24,12 +26,12 @@ name | params | description
 error | \- | \-
 load | \- | \-
 
-
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
-Name | Default Value | Description 
+Name | Default Value | Description
 -- | -- | --
---td-image-color | @font-gray-3 | - 
---td-image-loading-bg-color | @bg-color-secondarycontainer | - 
---td-image-loading-color | @font-gray-3 | - 
---td-image-round-radius | @radius-default | - 
+--td-image-color | @font-gray-3 | -
+--td-image-loading-bg-color | @bg-color-secondarycontainer | -
+--td-image-loading-color | @font-gray-3 | -
+--td-image-round-radius | @radius-default | -

src/image/README.md

@@ -39,12 +39,13 @@ isComponent: true
   </p>
 </details>
 
-
 ## API
+
 ### Image Props
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
+t-id | String | - | `1.2.10`。图片标签id | N
 error | String / Slot | 'default' | 加载失败时显示的内容。值为 `default` 则表示使用默认加载失败风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `error`；值为其他则表示普通文本内容，如“加载失败” | N
 height | String / Number | - | 高度，默认单位为`px` | N
 lazy | Boolean | false | 是否开启图片懒加载 | N
@@ -64,16 +65,18 @@ error | \- | 图片加载失败时触发
 load | \- | 图片加载完成时触发
 
 ### Image 外部样式类
+
 类名 | 说明
--- | -- 
+-- | --
 t-class | 根节点样式类
 t-class-load | 加载样式类
 
 ### CSS 变量
+
 组件提供了下列 CSS 变量，可用于自定义样式。
-名称 | 默认值 | 描述 
+名称 | 默认值 | 描述
 -- | -- | --
---td-image-color | @font-gray-3 | - 
---td-image-loading-bg-color | @bg-color-secondarycontainer | - 
---td-image-loading-color | @font-gray-3 | - 
---td-image-round-radius | @radius-default | - 
+--td-image-color | @font-gray-3 | -
+--td-image-loading-bg-color | @bg-color-secondarycontainer | -
+--td-image-loading-color | @font-gray-3 | -
+--td-image-round-radius | @radius-default | -

src/image/image.ts

@@ -39,7 +39,7 @@ export default class Image extends SuperComponent {
     onLoaded(e: any) {
       const sdkVersion = wx.getSystemInfoSync().SDKVersion;
       const versionArray = sdkVersion.split('.').map((v) => parseInt(v, 10));
-      const { mode } = this.properties;
+      const { mode, tId } = this.properties;
       const isInCompatible =
         versionArray[0] < 2 ||
         (versionArray[0] === 2 && versionArray[1] < 10) ||
@@ -48,7 +48,7 @@ export default class Image extends SuperComponent {
       if (mode === 'heightFix' && isInCompatible) {
         // 实现heightFix模式，保持高度和宽高比，设置对应的宽度
         const { height: picHeight, width: picWidth } = e.detail;
-        getRect(this, '#image').then((rect) => {
+        getRect(this, `#${tId ?? 'image'}`).then((rect) => {
           const { height } = rect;
           const resultWidth = ((height / picHeight) * picWidth).toFixed(2);
           this.setData({ innerStyle: `height: ${addUnit(height)}; width: ${resultWidth}px;` });

src/image/image.wxml

@@ -36,7 +36,7 @@
 </view>
 <!-- 图片 -->
 <image
-  id="image"
+  id="{{tId||'image'}}"
   hidden="{{isLoading || isFailed}}"
   class="class {{prefix}}-class {{classPrefix}} {{classPrefix}}--shape-{{shape}}"
   src="{{src}}"

src/image/props.ts

@@ -6,6 +6,11 @@
 
 import { TdImageProps } from './type';
 const props: TdImageProps = {
+  /** id，默认为null */
+  tId: {
+    type: String,
+    value: null,
+  },
   /** 加载失败时显示的内容。值为 `default` 则表示使用默认加载失败风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `error`；值为其他则表示普通文本内容，如“加载失败” */
   error: {
     type: String,

src/image/type.ts

@@ -5,6 +5,14 @@
  * */
 
 export interface TdImageProps {
+  /**
+   * 自定义组件id
+   * @default null
+   */
+  tId?: {
+    type: StringConstructor;
+    value?: string;
+  };
   /**
    * 自定义组件样式
    * @default ''