Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
wants to merge 3 commits into from
Closed

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2344462
docs(image): loading时图片加载错位
luckymhb Sep 6, 2024
f1e8e14
docs(progress): 修复首次进入时与设置的stroke-width的延迟显示和兼容性问题
luckymhb Sep 9, 2024
ede856d
fix(progress):  移除getInnerDiameter() 并改使用heightBar
Sep 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/image/README.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ className | Description
-- | --
t-class | \-
t-class-load | \-
t-class-image | \-
t-class-error | \-

### CSS Variables

Expand Down
2 changes: 2 additions & 0 deletions src/image/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,8 @@ load | - | 图片加载完成时触发
-- | --
t-class | 根节点样式类
t-class-load | 加载样式类
t-class-image | 图片样式类
t-class-error | 加载失败样式类

### CSS Variables

Expand Down
12 changes: 7 additions & 5 deletions src/image/image.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -34,6 +35,7 @@
&--lazy {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}

Expand Down
2 changes: 1 addition & 1 deletion src/image/image.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
98 changes: 51 additions & 47 deletions src/image/image.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}}">
anlyyao marked this conversation as resolved.
Show resolved Hide resolved
<!-- 加载中占位 -->
<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}}"
/>
2 changes: 2 additions & 0 deletions src/progress/progress.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export default class Progress extends SuperComponent {
computedStatus: '',
computedProgress: 0,
isIOS: false,
strokeCircleWidth: '',
};

attached() {
Expand Down Expand Up @@ -64,6 +65,7 @@ export default class Progress extends SuperComponent {
}
this.setData({
heightBar: unitConvert(strokeWidth),
strokeCircleWidth: Number.isNaN(strokeWidth) ? '' : `${strokeWidth}px`,
anlyyao marked this conversation as resolved.
Show resolved Hide resolved
});
},

Expand Down
2 changes: 1 addition & 1 deletion src/progress/progress.wxml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
>
<view
class="{{classPrefix}}__canvas--inner {{prefix}}-class-bar"
style="{{innerDiameter? 'width:'+ innerDiameter*2 + 'rpx;' + 'height:'+ innerDiameter*2 + 'rpx;': ''}}"
style="{{strokeCircleWidth? '--td-progress-stroke-circle-width:'+ strokeCircleWidth : ''}}"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style="{{heightBar? '--td-progress-stroke-circle-width:' + heightBar + 'px': ''}}"

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

getInnerDiameter() 可以整段移除了

>
<view wx:if="{{label}}" class="{{classPrefix}}__info {{prefix}}-class-label" aria-hidden="{{ true }}">
<template
Expand Down
Loading