feat: ✨ Toast 支持设置布局方向

✅ Closes: #780
Moonofweisheng · Feb 11, 2025 · ed60852 · ed60852
1 parent dd1a005
commit ed60852
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 5 deletions.
diff --git a/docs/component/toast.md b/docs/component/toast.md
@@ -66,6 +66,18 @@ toast.show({
 })
 ```
 
+## 排版方向
+
+`direction` 可设置排版方向，默认为横向排版。
+
+```typescript
+// 纵向排版
+toast.success({
+  msg: '纵向排版',
+  direction: 'vertical'
+})
+```
+
 ## 关闭提示
 
 ```typescript
@@ -107,6 +119,7 @@ toast.close()
 | ------------ | --------------------------------------------------------------------------- | ---------- | ------------------------- | ---------------------- | -------- |
 | msg          | 消息内容                                                                    | string     | -                         | -                      | -        |
 | duration     | 持续时间，单位 ms，为 0 时表示不自动关闭                                    | number     | -                         | 2000                   | -        |
+| direction     | 排版方向                                                                   | string     | vertical / horizontal | horizontal              | $LOWEST_VERSION$ |
 | iconName     | 图标类型                                                                    | string     | success / error / warning | -                      | -        |
 | iconSize     | 左侧图标尺寸                                                                | string     | -                         | -                   | -        |
 | iconClass    | 图标类目，自定义图标，可以使用 Icon 章节的那些图标类名，iconName 优先级更高 | string     | -                         | -                      | -        |

diff --git a/src/pages/toast/Index.vue b/src/pages/toast/Index.vue
@@ -23,6 +23,10 @@
         <wd-button @click="showLoadingToast">Loading加载</wd-button>
         <wd-button @click="showLoadingToast2">ring类型loading</wd-button>
       </demo-block>
+      <demo-block title="排版方向">
+        <wd-button @click="showHorizonToast">横向排版</wd-button>
+        <wd-button @click="showVerticalToast">纵向排版</wd-button>
+      </demo-block>
     </page-wraper>
   </view>
 </template>
@@ -99,6 +103,17 @@ function showCustomIconToast() {
     msg: '使用自定义图标'
   })
 }
+
+function showHorizonToast() {
+  toast.success('横向排版')
+}
+
+function showVerticalToast() {
+  toast.success({
+    msg: '纵向排版',
+    direction: 'vertical'
+  })
+}
 </script>
 <style lang="scss" scoped>
 :deep(button) {

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
@@ -647,6 +647,7 @@ $-toast-fs: var(--wot-toast-fs, $-fs-content) !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-icon-margin-bottom: var(--wot-toast-icon-margin-bottom, 12px) !default; // 图标下边距
 $-toast-loading-padding: var(--wot-toast-loading-padding, 10px) !default; // loading 下的padding
 $-toast-box-shadow: var(--wot-toast-box-shadow, 0px 6px 16px 0px rgba(0, 0, 0, 0.08)) !default; // 外部阴影
 

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
@@ -13,6 +13,9 @@
   box-sizing: border-box;
   box-shadow: $-toast-box-shadow;
 
+  @include when(vertical) {
+    flex-direction: column;
+  }
   @include e(msg) {
     font-size: $-toast-fs;
     line-height: 20px;
@@ -23,6 +26,11 @@
     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;
+    }
   }
   @include e(iconWrap){
     font-size: 0;

diff --git a/src/uni_modules/wot-design-uni/components/wd-toast/index.ts b/src/uni_modules/wot-design-uni/components/wd-toast/index.ts
@@ -66,7 +66,7 @@ export function useToast(selector: string = ''): Toast {
   const info = createMethod({ iconName: 'info' })
 
   const close = () => {
-    toastOption.value = { show: false }
+    toastOption.value.show = false
   }
   return {
     show,

diff --git a/src/uni_modules/wot-design-uni/components/wd-toast/types.ts b/src/uni_modules/wot-design-uni/components/wd-toast/types.ts
@@ -20,6 +20,7 @@ export type ToastLoadingType = LoadingType // 提示信息加载状态类型
 export type ToastOptions = {
   msg?: string
   duration?: number
+  direction?: 'vertical' | 'horizontal'
   iconName?: ToastIconType
   iconSize?: number
   loadingType?: ToastLoadingType

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
@@ -3,16 +3,28 @@
   <wd-transition name="fade" :show="show" :custom-style="transitionStyle" @after-enter="handleAfterEnter" @after-leave="handleAfterLeave">
     <view :class="rootClass">
       <!--iconName优先级更高-->
-      <wd-loading v-if="iconName === 'loading'" :type="loadingType" :color="loadingColor" :size="loadingSize" custom-class="wd-toast__icon" />
+      <wd-loading
+        v-if="iconName === 'loading'"
+        :type="loadingType"
+        :color="loadingColor"
+        :size="loadingSize"
+        :custom-class="`wd-toast__icon ${toastOption.direction === 'vertical' ? 'is-vertical' : ''}`"
+      />
       <view
-        class="wd-toast__iconWrap wd-toast__icon"
+        :class="`wd-toast__iconWrap wd-toast__icon ${toastOption.direction === 'vertical' ? 'is-vertical' : ''}`"
         v-else-if="iconName === 'success' || iconName === 'warning' || iconName === 'info' || iconName === 'error'"
       >
         <view class="wd-toast__iconBox">
           <view class="wd-toast__iconSvg" :style="svgStyle"></view>
         </view>
       </view>
-      <wd-icon v-else-if="iconClass" custom-class="wd-toast__icon" :size="iconSize" :class-prefix="classPrefix" :name="iconClass"></wd-icon>
+      <wd-icon
+        v-else-if="iconClass"
+        :custom-class="`wd-toast__icon ${toastOption.direction === 'vertical' ? 'is-vertical' : ''}`"
+        :size="iconSize"
+        :class-prefix="classPrefix"
+        :name="iconClass"
+      ></wd-icon>
       <!--文本-->
       <view v-if="msg" class="wd-toast__msg">{{ msg }}</view>
     </view>
@@ -107,7 +119,7 @@ const transitionStyle = computed(() => {
 const rootClass = computed(() => {
   return `wd-toast ${props.customClass} wd-toast--${position.value} ${
     (iconName.value !== 'loading' || msg.value) && (iconName.value || iconClass.value) ? 'wd-toast--with-icon' : ''
-  } ${iconName.value === 'loading' && !msg.value ? 'wd-toast--loading' : ''}`
+  } ${iconName.value === 'loading' && !msg.value ? 'wd-toast--loading' : ''} ${toastOption.value.direction === 'vertical' ? 'is-vertical' : ''}`
 })
 
 const svgStyle = computed(() => {