From 1c315a9c023d0ee1417f18fe9b5bb3d4213ab6ba Mon Sep 17 00:00:00 2001
From: TAYUN <80144903+TAYUN@users.noreply.github.com>
Date: Thu, 6 Nov 2025 13:21:13 +0800
Subject: [PATCH] =?UTF-8?q?style(toast):=20=E8=B0=83=E6=95=B4toast?=
=?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E9=97=B4=E8=B7=9D=E5=B9=B6?=
=?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=B7=A6=E8=BE=B9=E8=B7=9D=E5=8F=98=E9=87=8F?=
=?UTF-8?q?(=E7=A0=B4=E5=9D=8F=E6=80=A7=E6=9B=B4=E6=96=B0)=20(#1329)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* style(toast): 调整toast组件样式间距并添加左边距变量
移除图标右边距，为消息内容添加左边距变量以保持样式一致性
* feat(toast): 添加垂直方向时的消息样式
当direction为vertical时，移除消息的左外边距并添加垂直布局样式
* style(wd-toast): 移除垂直布局下多余的右边距
垂直布局时图标不需要右边距，保持样式简洁
* style(toast): 优化成仅在图标显示的时候显示文字左边距
* refactor(样式变量): 移除未使用的toast图标右边距变量
---
.../components/common/abstracts/variable.scss | 2 +-
.../wot-design-uni/components/wd-toast/index.scss | 10 +++++++---
.../wot-design-uni/components/wd-toast/wd-toast.vue | 2 +-
3 files changed, 9 insertions(+), 5 deletions(-)
diff --git a/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss b/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
index d8ee70b0..058f26e1 100644
--- a/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
+++ b/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
@@ -651,7 +651,7 @@ $-toast-fs: var(--wot-toast-fs, $-fs-content) !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-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-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
diff --git a/src/uni_modules/wot-design-uni/components/wd-toast/index.scss b/src/uni_modules/wot-design-uni/components/wd-toast/index.scss
index 8d225bc4..ce0f4f78 100644
--- a/src/uni_modules/wot-design-uni/components/wd-toast/index.scss
+++ b/src/uni_modules/wot-design-uni/components/wd-toast/index.scss
@@ -24,13 +24,11 @@
text-align: left;
font-family: "San Francisco", Rotobo, arial, "PingFang SC", "Noto SansCJK", "Microsoft Yahei", sans-serif;
}
+
@include edeep(icon) {
display: inline-block;
- margin-right: $-toast-icon-margin-right;
font-size: $-toast-icon-size;
-
@include when(vertical) {
- margin-right: 0;
margin-bottom: $-toast-icon-margin-bottom;
}
}
@@ -67,6 +65,12 @@
min-width: $-toast-with-icon-min-width;
display: inline-flex;
align-items: center;
+ @include me(msg) {
+ margin-left: $-toast-msg-margin-left;
+ @include when(vertical) {
+ margin-left: 0;
+ }
+ }
}
@include m(loading) {
min-width: auto;
diff --git a/src/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue b/src/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue
index 78c43b08..aa0fcea9 100644
--- a/src/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue
@@ -26,7 +26,7 @@
:name="iconClass"
>
- {{ msg }}
+ {{ msg }}