Skip to content

Commit

Permalink
fix: 样式改为flex布局,修复没有设置max时的问题,调整image的样式
Browse files Browse the repository at this point in the history
  • Loading branch information
xiaoyatong committed Jun 14, 2024
1 parent a9332d3 commit be20eff
Show file tree
Hide file tree
Showing 9 changed files with 116 additions and 133 deletions.
100 changes: 47 additions & 53 deletions src/packages/avatar/avatar.harmony.css
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,8 @@
.nut-avatar-group {
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
display: flex;
flex-direction: row;
position: relative;
flex: 0 0 auto;
}
.nut-avatar-group .nut-avatar {
border: 1px solid #fff;
}
.nut-avatar-group .nut-avatar:not(:first-of-type) {
margin-left: -8px;
}

[dir=rtl] .nut-avatar-group .nut-avatar:not(:first-of-type),
.nut-rtl .nut-avatar-group .nut-avatar:not(:first-of-type) {
margin-left: 0;
margin-right: -8px;
}

.nut-image {
display: block;
position: relative;
}
.nut-image .nut-img {
.nut-image-default {
display: block;
width: 100%;
height: 100%;
Expand All @@ -33,7 +11,7 @@
border-radius: 50%;
overflow: hidden;
}
.nut-image .nut-img-loading {
.nut-image-loading {
width: 100%;
height: 100%;
position: absolute;
Expand All @@ -46,7 +24,7 @@
background: #f5f6fa;
background-size: 100% 100%;
}
.nut-image .nut-img-error {
.nut-image-error {
width: 100%;
height: 100%;
position: absolute;
Expand All @@ -71,14 +49,28 @@
right: 0;
}

.nut-avatar-group {
display: flex;
flex-direction: row;
flex: 0 0 auto;
}
.nut-avatar-group .nut-avatar {
border: 1px solid #fff;
}
.nut-avatar-group .nut-avatar:not(:first-of-type) {
margin-left: -8px;
}

[dir=rtl] .nut-avatar-group .nut-avatar:not(:first-of-type),
.nut-rtl .nut-avatar-group .nut-avatar:not(:first-of-type) {
margin-left: 0;
margin-right: -8px;
}

.nut-avatar {
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
display: inline-block;
position: relative;
flex: 0 0 auto;
text-align: center;
border: 1px solid #ddd;
}
.nut-avatar-round {
border-radius: 999px;
Expand All @@ -91,71 +83,74 @@
width: 100%;
height: 100%;
flex-shrink: 0;
position: absolute;
top: 50%;
left: 50%;
/* #ifndef rn */
transform: translate(-50%, -50%);
/* #endif */
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
}
.nut-avatar-icon {
background-size: 100% 100%;
position: absolute;
top: 50%;
left: 50%;
/* #ifndef rn */
transform: translate(-50%, -50%);
/* #endif */
}
.nut-avatar .nut-icon-img {
width: 100%;
height: 100%;
}
.nut-avatar-text {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
display: inline-block;
text-align: center;
overflow: hidden;
}
.nut-avatar-large {
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
line-height: 60px;
}
.nut-avatar-large-img {
width: 60px;
height: 60px;
}
.nut-avatar-large-img-image {
width: 60px;
height: 60px;
}
.nut-avatar-large-icon {
width: 60px;
height: 60px;
}
.nut-avatar-large .nut-icon-img {
width: 100%;
height: 100%;
}
.nut-avatar-large-text {
width: 60px;
height: 60px;
line-height: 60px;
}
.nut-avatar-small {
display: flex;
justify-content: center;
align-items: center;
width: 32px;
height: 32px;
line-height: 32px;
}
.nut-avatar-small-img {
.nut-avatar-small-img-image {
width: 32px;
height: 32px;
}
.nut-avatar-small-text {
width: 32px;
height: 32px;
line-height: 32px;
}
.nut-avatar-normal {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
line-height: 40px;
}
.nut-avatar-normal-img {
.nut-avatar-normal-img-image {
width: 40px;
height: 40px;
}
Expand All @@ -166,5 +161,4 @@
.nut-avatar-normal-text {
width: 40px;
height: 40px;
line-height: 40px;
}
57 changes: 25 additions & 32 deletions src/packages/avatar/avatar.scss
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
@import '../avatargroup/avatargroup.scss';
@import '../image/image.scss';
@import '../avatargroup/avatargroup.scss';

.nut-avatar {
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
display: inline-block;
position: relative;
flex: 0 0 auto; // 防止被压缩
text-align: center;
border: 1px solid #ddd;
&-round {
border-radius: 999px;
overflow: hidden;
Expand All @@ -22,22 +18,13 @@
width: 100%;
height: 100%;
flex-shrink: 0;
position: absolute;
top: 50%;
left: 50%;
/* #ifndef rn */
transform: translate(-50%, -50%);
/* #endif */
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
}

&-icon {
background-size: 100% 100%;
position: absolute;
top: 50%;
left: 50%;
/* #ifndef rn */
transform: translate(-50%, -50%);
/* #endif */
}

.nut-icon-img {
Expand All @@ -46,26 +33,32 @@
}

&-text {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
display: inline-block;
text-align: center;
overflow: hidden;
}

&-large {
display: flex;
justify-content: center;
align-items: center;
width: $avatar-large-width;
height: $avatar-large-height;
line-height: $avatar-large-height;

&-img {
width: $avatar-large-width;
height: $avatar-large-height;
&-image {
width: $avatar-large-width;
height: $avatar-large-height;
}
}

&-icon {
// width: $avatar-large-width;
// height: $avatar-large-height;
width: $avatar-large-width;
height: $avatar-large-height;
}

.nut-icon-img {
Expand All @@ -76,16 +69,17 @@
&-text {
width: $avatar-large-width;
height: $avatar-large-height;
line-height: $avatar-large-height;
}
}

&-small {
display: flex;
justify-content: center;
align-items: center;
width: $avatar-small-width;
height: $avatar-small-height;
line-height: $avatar-small-height;

&-img {
&-img-image {
width: $avatar-small-width;
height: $avatar-small-height;
}
Expand All @@ -96,16 +90,17 @@
&-text {
width: $avatar-small-width;
height: $avatar-small-height;
line-height: $avatar-small-height;
}
}

&-normal {
display: flex;
justify-content: center;
align-items: center;
width: $avatar-normal-width;
height: $avatar-normal-height;
line-height: $avatar-normal-height;

&-img {
&-img-image {
width: $avatar-normal-width;
height: $avatar-normal-height;
}
Expand All @@ -121,7 +116,6 @@
&-text {
width: $avatar-normal-width;
height: $avatar-normal-height;
line-height: $avatar-normal-height;
}
}
}
Expand All @@ -133,7 +127,6 @@
// right: 50%;
// transform: translate(50%, -50%);
// }

// .icon {
// left: auto;
// right: 50%;
Expand Down
29 changes: 20 additions & 9 deletions src/packages/avatar/avatar.taro.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { AvatarContext } from '@/packages/avatargroup/context'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
import { harmonyAndRn } from '@/utils/platform-taro'
import AvatarGroup from '@/packages/avatargroup/index.taro'
import pxTransform from '@/utils/px-transform'

export interface AvatarProps extends BasicComponent {
size: string
Expand Down Expand Up @@ -135,7 +136,7 @@ export const Avatar: FunctionComponent<
}
}
const index = avatarRef?.current?.dataset?.index
const maxCount = parent?.propAvatarGroup?.max
const maxCount = parent?.propAvatarGroup?.max || children.length
setMaxSum(children.length)
setAvatarIndex(index)
if (
Expand Down Expand Up @@ -174,14 +175,24 @@ export const Avatar: FunctionComponent<
{(!parent?.propAvatarGroup?.max ||
avatarIndex <= parent?.propAvatarGroup?.max) && (
<>
{src && (
<Image
className={`nut-avatar-img nut-avatar-${parent?.propAvatarGroup?.size || size || 'normal'}-img`}
src={src}
style={{ objectFit: fit }}
onError={errorEvent}
/>
)}
{src &&
(harmonyAndRn() ? (
<Image
className={`nut-avatar-img nut-avatar-${parent?.propAvatarGroup?.size || size || 'normal'}-img`}
src={src}
width={pxTransform(60)}
height={pxTransform(60)}
style={{ objectFit: fit }}
onError={errorEvent}
/>
) : (
<Image
className={`nut-avatar-img nut-avatar-${parent?.propAvatarGroup?.size || size || 'normal'}-img`}
src={src}
style={{ objectFit: fit }}
onError={errorEvent}
/>
))}
{React.isValidElement(icon)
? React.cloneElement<any>(icon, {
...icon.props,
Expand Down
2 changes: 1 addition & 1 deletion src/packages/avatar/avatar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ export const Avatar: FunctionComponent<
}
}
const index = Number(avatarRef?.current?.dataset?.index)
const maxCount = parent?.propAvatarGroup?.max
const maxCount = parent?.propAvatarGroup?.max || children.length
setMaxSum(children.length)
setAvatarIndex(index)
if (
Expand Down
Loading

0 comments on commit be20eff

Please sign in to comment.