admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 09:08:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(toast): 调整toast组件样式间距并添加左边距变量(破坏性更新) (#1329)

Browse Source 
* style(toast): 调整toast组件样式间距并添加左边距变量

移除图标右边距，为消息内容添加左边距变量以保持样式一致性

* feat(toast): 添加垂直方向时的消息样式

当direction为vertical时，移除消息的左外边距并添加垂直布局样式

* style(wd-toast): 移除垂直布局下多余的右边距

垂直布局时图标不需要右边距，保持样式简洁

* style(toast): 优化成仅在图标显示的时候显示文字左边距

* refactor(样式变量): 移除未使用的toast图标右边距变量
This commit is contained in:
TAYUN 2025-11-06 13:21:13 +08:00 committed by GitHub
parent 84ecdd32c1
commit 1c315a9c02
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
View File

@ -651,7 +651,7 @@ $-toast-fs: var(--wot-toast-fs, $-fs-content) !default; // 字号
$-toast-line-height: var(--wot-toast-line-height, 20px) !default; // 行高 $-toast-line-height: var(--wot-toast-line-height, 20px) !default; // 行高
$-toast-with-icon-min-width: var(--wot-toast-with-icon-min-width, 150px) !default; // 有图标的情况下最小宽度 $-toast-with-icon-min-width: var(--wot-toast-with-icon-min-width, 150px) !default; // 有图标的情况下最小宽度
$-toast-icon-size: var(--wot-toast-icon-size, 32px) !default; // 图标大小 $-toast-icon-size: var(--wot-toast-icon-size, 32px) !default; // 图标大小
$-toast-icon-margin-right: var(--wot-toast-icon-margin-right, 12px) !default; // 图标右边距 $-toast-msg-margin-left: var(--wot-toast-msg-margin-left, 12px) !default; // 消息内容左边距
$-toast-icon-margin-bottom: var(--wot-toast-icon-margin-bottom, 12px) !default; // 图标下边距 $-toast-icon-margin-bottom: var(--wot-toast-icon-margin-bottom, 12px) !default; // 图标下边距
$-toast-loading-padding: var(--wot-toast-loading-padding, 10px) !default; // loading状态下的padding $-toast-loading-padding: var(--wot-toast-loading-padding, 10px) !default; // loading状态下的padding
$-toast-loading-margin-bottom: var(--wot-toast-loading-margin-bottom, 16px) !default; // loading动画的margin-bottom $-toast-loading-margin-bottom: var(--wot-toast-loading-margin-bottom, 16px) !default; // loading动画的margin-bottom

10
src/uni_modules/wot-design-uni/components/wd-toast/index.scss
View File

@ -24,13 +24,11 @@
text-align: left; text-align: left;
font-family: "San Francisco", Rotobo, arial, "PingFang SC", "Noto SansCJK", "Microsoft Yahei", sans-serif; font-family: "San Francisco", Rotobo, arial, "PingFang SC", "Noto SansCJK", "Microsoft Yahei", sans-serif;
} }
@include edeep(icon) { @include edeep(icon) {
display: inline-block; display: inline-block;
margin-right: $-toast-icon-margin-right;
font-size: $-toast-icon-size; font-size: $-toast-icon-size;
@include when(vertical) { @include when(vertical) {
margin-right: 0;
margin-bottom: $-toast-icon-margin-bottom; margin-bottom: $-toast-icon-margin-bottom;
} }
} }
@ -67,6 +65,12 @@
min-width: $-toast-with-icon-min-width; min-width: $-toast-with-icon-min-width;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@include me(msg) {
margin-left: $-toast-msg-margin-left;
@include when(vertical) {
margin-left: 0;
}
}
} }
@include m(loading) { @include m(loading) {
min-width: auto; min-width: auto;

2
src/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue
View File

@ -26,7 +26,7 @@
:name="iconClass" :name="iconClass"
></wd-icon> ></wd-icon>
<!--文本--> <!--文本-->
<view v-if="msg" class="wd-toast__msg">{{ msg }}</view> <view v-if="msg" :class="`wd-toast__msg ${direction === 'vertical' ? 'is-vertical' : ''}`">{{ msg }}</view>
</view> </view>
</wd-transition> </wd-transition>
</template> </template>