feat: ✨ Toast 支持通过props设置组件属性并新增局中显示的配置 (#888)

docs/component/toast.md

@@ -2,6 +2,10 @@
 
 轻提示组件，用于消息通知、加载提示、操作结果提示等场景，支持函数式调用。
 
+:::tip 提示
+`Toast` 自 $LOWEST_VERSION$ 版本起支持通过 `props` 属性控制组件样式，字段见[props](#props)，需要注意的是函数式调用api的`options`优先级高于`props`。
+:::
+
 ## 基本用法
 
 需要在页面中引入该组件，作为挂载点。
@@ -52,6 +56,8 @@ toast.show({
 
 ## 提示位置
 
+通过设置 `position` 属性，可以设置提示信息的位置，默认为 `middle-top`。
+
 ```typescript
 // 顶部提示
 toast.show({
@@ -59,6 +65,12 @@ toast.show({
   msg: '提示信息'
 })
 
+// 局中提示
+toast.show({
+  position: 'middle',
+  msg: '提示信息'
+})
+
 // 底部提示
 toast.show({
   position: 'bottom',
@@ -109,29 +121,45 @@ toast.close()
 
 ## Attributes
 
-| 参数    | 说明                                   | 类型            | 可选值 | 默认值 | 最低版本 |
+| 参数         | 说明                                     | 类型     | 可选值                                     | 默认值     | 最低版本         |
-| ------- | -------------------------------------- | --------------- | ------ | ------ | -------- |
+|--------------|------------------------------------------|----------|--------------------------------------------|------------|------------------|
-| options | 配置项，可以直接传入字符串作为提示信息 | string / object | -      | -      | -        |
+| selector     | 选择器                                   | string   | -                                          | ''         | -                |
+| msg          | 提示信息                                 | string   | -                                          | ''         | $LOWEST_VERSION$ |
+| duration     | 持续时间，单位 ms，为 0 时表示不自动关闭 | number   | -                                          | 2000       | $LOWEST_VERSION$ |
+| direction    | 排列方向                                 | string   | vertical / horizontal                      | horizontal | $LOWEST_VERSION$ |
+| iconName     | 图标类型                                 | string   | success / error / warning / loading / info | ''         | $LOWEST_VERSION$ |
+| iconSize     | 图标大小                                 | number   | -                                          | -          | $LOWEST_VERSION$ |
+| loadingType  | 加载类型                                 | string   | outline / ring                             | outline    | $LOWEST_VERSION$ |
+| loadingColor | 加载颜色                                 | string   | -                                          | #4D80F0    | $LOWEST_VERSION$ |
+| loadingSize  | 加载大小                                 | number   | -                                          | -          | $LOWEST_VERSION$ |
+| iconColor    | 图标颜色                                 | string   | -                                          | -          | $LOWEST_VERSION$ |
+| position     | 提示信息框的位置                         | string   | top / middle-top / middle / bottom         | middle-top | $LOWEST_VERSION$ |
+| zIndex       | 层级                                     | number   | -                                          | 100        | $LOWEST_VERSION$ |
+| cover        | 是否存在遮罩层                           | boolean  | -                                          | false      | $LOWEST_VERSION$ |
+| iconClass    | 图标类名                                 | string   | -                                          | ''         | $LOWEST_VERSION$ |
+| classPrefix  | 类名前缀，用于使用自定义图标             | string   | -                                          | wd-icon    | $LOWEST_VERSION$ |
+| opened       | 完全展示后的回调函数                     | Function | -                                          | -          | $LOWEST_VERSION$ |
+| closed       | 完全关闭时的回调函数                     | Function | -                                          | -          | $LOWEST_VERSION$ |
 
-## options
+## Options
 
-| 参数         | 说明                                                                        | 类型       | 可选值                    | 默认值                 | 最低版本 |
+| 参数         | 说明                                                                        | 类型     | 可选值                    | 默认值     | 最低版本 |
-| ------------ | --------------------------------------------------------------------------- | ---------- | ------------------------- | ---------------------- | -------- |
+|--------------|-----------------------------------------------------------------------------|----------|---------------------------|------------|----------|
-| msg          | 消息内容                                                                    | string     | -                         | -                      | -        |
+| msg          | 消息内容                                                                    | string   | -                         | ''         | -        |
-| duration     | 持续时间，单位 ms，为 0 时表示不自动关闭                                    | number     | -                         | 2000                   | -        |
+| duration     | 持续时间，单位 ms，为 0 时表示不自动关闭                                    | number   | -                         | 2000       | -        |
-| direction     | 排版方向                                                                   | string     | vertical / horizontal | horizontal              | $LOWEST_VERSION$ |
+| direction    | 排版方向                                                                    | string   | vertical / horizontal     | horizontal | $LOWEST_VERSION$        |
-| iconName     | 图标类型                                                                    | string     | success / error / warning | -                      | -        |
+| iconName     | 图标类型                                                                    | string   | success / error / warning | ''         | -        |
-| iconSize     | 左侧图标尺寸                                                                | string     | -                         | -                   | -        |
+| iconSize     | 左侧图标尺寸                                                                | number   | -                         | -          | -        |
-| iconClass    | 图标类目，自定义图标，可以使用 Icon 章节的那些图标类名，iconName 优先级更高 | string     | -                         | -                      | -        |
+| iconClass    | 图标类目，自定义图标，可以使用 Icon 章节的那些图标类名，iconName 优先级更高 | string   | -                         | ''         | -        |
-| classPrefix   | 类名前缀，用于使用自定义图标                 | string    | -                         | -                  | -        |
+| classPrefix  | 类名前缀，用于使用自定义图标                                                | string   | -                         | 'wd-icon'  | -        |
-| position     | 提示信息框的位置                                                            | string     | top / middle / bottom     | middle                 | -        |
+| position     | 提示信息框的位置                                                            | string   | top / middle / bottom     | middle-top | -        |
-| zIndex       | toast 层级                                                                  | number     | -                         | 100                    | -        |
+| zIndex       | toast 层级                                                                  | number   | -                         | 100        | -        |
-| loadingType  | [加载中图标类型](/component/loading)                                        | string     | ring                      | outline                | -        |
+| loadingType  | [加载中图标类型](/component/loading)                                        | string   | ring                      | outline    | -        |
-| loadingColor | [加载中图标颜色](/component/loading)                                        | string     | -                         | #4D80F0                | -        |
+| loadingColor | [加载中图标颜色](/component/loading)                                        | string   | -                         | #4D80F0    | -        |
-| selector     | 指定唯一标识                                                  | string          | -                        | -  | -        |
+| selector     | 指定唯一标识                                                                | string   | -                         | ''         | -        |
-| cover        | 是否存在一个透明遮罩                                                        | boolean    | -                         | `loading`时默认为 true | 1.2.15   |
+| cover        | 是否存在一个透明遮罩                                                        | boolean  | -                         | false      | -        |
-| opened       | 完全展示后的回调函数                                                        | `Function` | -                         | -                      | 1.2.15   |
+| opened       | 完全展示后的回调函数                                                        | Function | -                         | -          | -        |
-| closed       | 完全关闭后的回调函数                                                        | `Function` | -                         | -                      | 1.2.15   |
+| closed       | 完全关闭后的回调函数                                                        | Function | -                         | -          | -        |
 
 ## Methods
 

src/pages/toast/Index.vue

@@ -17,11 +17,13 @@
       </demo-block>
       <demo-block title="提示位置">
         <wd-button @click="showTopToast">顶部toast</wd-button>
+        <wd-button @click="showMiddletoast">局中toast</wd-button>
         <wd-button @click="showBottomToast">底部toast</wd-button>
       </demo-block>
       <demo-block title="Loading">
         <wd-button @click="showLoadingToast">Loading加载</wd-button>
         <wd-button @click="showLoadingToast2">ring类型loading</wd-button>
+        <wd-button @click="showLoadingToast3">纵向布局loading</wd-button>
       </demo-block>
       <demo-block title="排版方向">
         <wd-button @click="showHorizonToast">横向排版</wd-button>
@@ -63,6 +65,21 @@ function showTopToast() {
     }
   })
 }
+
+function showMiddletoast() {
+  toast.show({
+    position: 'middle',
+    iconClass: 'star',
+    msg: '提示信息',
+    closed() {
+      console.log(232)
+    },
+    opened() {
+      console.log(2323232)
+    }
+  })
+}
+
 function showBottomToast() {
   toast.show({
     position: 'bottom',
@@ -85,6 +102,16 @@ function showLoadingToast2() {
     toast.close()
   }, 3000)
 }
+
+function showLoadingToast3() {
+  toast.loading({
+    msg: '芦叶满汀洲，寒沙带浅流。二十年重过南楼。柳下系船犹未稳，能几日，又中秋。黄鹤断矶头，故人曾到否？旧江山浑是新愁。欲买桂花同载酒，终不似，少年游。',
+    direction: 'vertical'
+  })
+  setTimeout(() => {
+    toast.close()
+  }, 3000)
+}
 function showLongToast() {
   toast.show('这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文案')
 }
@@ -110,7 +137,7 @@ function showHorizonToast() {
 
 function showVerticalToast() {
   toast.success({
-    msg: '纵向排版',
+    msg: '芦叶满汀洲，寒沙带浅流。二十年重过南楼。柳下系船犹未稳，能几日，又中秋。黄鹤断矶头，故人曾到否？旧江山浑是新愁。欲买桂花同载酒，终不似，少年游。',
     direction: 'vertical'
   })
 }

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

@@ -16,6 +16,7 @@
   @include when(vertical) {
     flex-direction: column;
   }
+
   @include e(msg) {
     font-size: $-toast-fs;
     line-height: 20px;
@@ -55,7 +56,7 @@
   @include m(top) {
     transform: translate3d(0, -40vh, 0);
   }
-  @include m(middle){
+  @include m(middle-top){
     transform: translate3d(0%,-18.8vh,0);
   }
   @include m(bottom) {

src/uni_modules/wot-design-uni/components/wd-toast/index.ts

@@ -9,14 +9,7 @@ const toastDefaultOptionKey = '__TOAST_OPTION__'
 
 // 默认模板
 export const defaultOptions: ToastOptions = {
-  msg: '',
+  show: false
-  duration: 2000,
-  loadingType: 'outline',
-  loadingColor: '#4D80F0',
-  iconColor: '#4D80F0',
-  position: 'middle',
-  show: false,
-  zIndex: 100
 }
 
 const None = Symbol('None')
@@ -31,7 +24,6 @@ export function useToast(selector: string = ''): Toast {
   let timer: ReturnType<typeof setTimeout> | null = null
 
   const createMethod = (toastOptions: ToastOptions) => {
-    // 优先级：options->toastOptions->defaultOptions
     return (options: ToastOptions | string) => {
       return show(deepMerge(toastOptions, typeof options === 'string' ? { msg: options } : options) as ToastOptions)
     }
@@ -66,7 +58,7 @@ export function useToast(selector: string = ''): Toast {
   const info = createMethod({ iconName: 'info' })
 
   const close = () => {
-    toastOption.value.show = false
+    toastOption.value = { show: false }
   }
   return {
     show,
@@ -91,7 +83,7 @@ export const toastIcon = {
     return '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>警告</title><desc>Created with Sketch.</desc> <defs> <filter x="-240.0%" y="-60.0%" width="580.0%" height="220.0%" filterUnits="objectBoundingBox" id="filter-1"><feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0.824756567   0 0 0 0 0.450356612   0 0 0 0 0.168550194  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-580.000000, -538.000000)"> <g id="警告" transform="translate(580.000000, 538.000000)"><circle id="Oval" fill="#F0883A" opacity="0.400000006" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#F0883A" cx="21" cy="21" r="16"></circle><g id="Group-6" filter="url(#filter-1)" transform="translate(18.500000, 10.800000)"><rect id="Rectangle" fill="#FFFFFF" transform="translate(2.492935, 7.171583) scale(1, -1) rotate(-360.000000) translate(-2.492935, -7.171583) " x="0.992934699" y="0.955464537" width="3" height="12.4322365" rx="1.5"></rect><rect id="Rectangle-Copy-25" fill="#FFDEC5" transform="translate(2.508751, 17.202636) scale(1, -1) rotate(-360.000000) translate(-2.508751, -17.202636) " x="1.00875134" y="15.200563" width="3" height="4.00414639" rx="1.5"></rect></g></g></g></g></svg>'
   },
   info() {
-    return '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>常规</title><desc>Created with Sketch.</desc><defs><filter x="-300.0%" y="-57.1%" width="700.0%" height="214.3%" filterUnits="objectBoundingBox" id="filter-1"><feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0.362700096   0 0 0 0 0.409035039   0 0 0 0 0.520238904  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-772.000000, -538.000000)"><g id="常规" transform="translate(772.000000, 538.000000)"><circle id="Oval" fill="#909CB7" opacity="0.4" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#909CB7" cx="21" cy="21" r="16"></circle><g id="Group-6" filter="url(#filter-1)" transform="translate(18.500000, 9.800000)"><g id="编组-2" transform="translate(2.492935, 10.204709) rotate(-180.000000) translate(-2.492935, -10.204709) translate(0.992935, 0.204709)"><rect id="Rectangle" fill="#FFFFFF" transform="translate(1.500000, 7.000000) scale(1, -1) rotate(-360.000000) translate(-1.500000, -7.000000) " x="0" y="0" width="3" height="14" rx="1.5"></rect><rect id="Rectangle-Copy-25" fill="#EEEEEE" transform="translate(1.500000, 18.000000) scale(1, -1) rotate(-360.000000) translate(-1.500000, -18.000000) " x="0" y="16" width="3" height="4" rx="1.5"></rect></g></g></g></g></g></svg>'
+    return '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>常规</title><desc>Created with Sketch.</desc><defs><filter x="-300.0%" y="-57.1%" width="700.0%" height="214.3%" filterUnits="objectBoundingBox" id="filter-1"><feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0.362700096   0 0 0 0 0.409035039   0 0 0 0 0.520238904  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-772.000000, -538.000000)"><g id="常规" transform="translate(772.000000, 538.000000)"><circle id="Oval" fill="#909CB7" opacity="0.4" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#909CB7" cx="21" cy="21" r="16"></circle><g id="Group-6" filter="url(#filter-1)" transform="translate(18.500000, 9.800000)"><g id="编组-2" transform="translate(2.492935, 10.204709) rotate(-180.000000) translate(-2.492935, -10.204709) translate(0.992935, 0.204709)"><rect id="Rectangle" fill="#FFFFFF" transform="translate(1.500000, 7.000000) scale(1, -1) rotate(-360.000000) translate(-1.500000, -7.000000) " x="0" y="0" width="3" height="14" rx="1.5"></rect><rect id="Rectangle-Copy-25" fill="#EEEEEE" transform="translate(1.500000, 18.000000) scale(1, -1) rotate(-360.000000) translate(-1.500000, -18.000000) " x="0" y="16" width="3" height="4" rx="1.5"></rect></g></g></g></g></svg>'
   },
   error() {
     return '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>toast</title><desc>Created with Sketch.</desc><defs><linearGradient x1="99.6229896%" y1="50.3770104%" x2="0.377010363%" y2="50.3770104%" id="linearGradient-1"><stop stop-color="#FFDFDF" offset="0%"></stop><stop stop-color="#F9BEBE" offset="100%"></stop></linearGradient><linearGradient x1="0.377010363%" y1="50.3770104%" x2="99.6229896%" y2="50.3770104%" id="linearGradient-2"><stop stop-color="#FFDFDF" offset="0%"></stop><stop stop-color="#F9BEBE" offset="100%"></stop></linearGradient></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-196.000000, -538.000000)"> <g id="toast" transform="translate(196.000000, 538.000000)"><circle id="Oval" fill="#FA4350" opacity="0.400000006" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#FA4350" opacity="0.900000036" cx="21" cy="21" r="16"></circle><rect id="矩形" fill="#FFDFDF" transform="translate(21.071068, 21.071068) rotate(-225.000000) translate(-21.071068, -21.071068) " x="12.5710678" y="19.5710678" width="17" height="3" rx="1.5"></rect><rect id="矩形" fill="url(#linearGradient-1)" transform="translate(19.303301, 22.838835) rotate(-225.000000) translate(-19.303301, -22.838835) " x="17.3033009" y="21.3388348" width="4" height="3"></rect><rect id="矩形" fill="url(#linearGradient-2)" transform="translate(22.838835, 19.303301) rotate(-225.000000) translate(-22.838835, -19.303301) " x="20.8388348" y="17.8033009" width="4" height="3"></rect><rect id="矩形" fill="#FFFFFF" transform="translate(21.071068, 21.071068) rotate(-315.000000) translate(-21.071068, -21.071068) " x="12.5710678" y="19.5710678" width="17" height="3" rx="1.5"></rect></g></g></g></svg>'

src/uni_modules/wot-design-uni/components/wd-toast/types.ts

@@ -1,26 +1,28 @@
 /*
  * @Author: weisheng
  * @Date: 2023-06-19 12:47:57
- * @LastEditTime: 2024-07-18 22:18:07
+ * @LastEditTime: 2025-02-11 21:34:01
  * @LastEditors: weisheng
  * @Description:
  * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-toast/types.ts
  * 记得注释
  */
-import type { ExtractPropTypes } from 'vue'
+import type { ExtractPropTypes, PropType } from 'vue'
 import { baseProps, makeStringProp } from '../common/props'
 import type { LoadingType } from '../wd-loading/types'
 
 export type ToastIconType = 'success' | 'error' | 'warning' | 'loading' | 'info' // 图标类型
 
-export type ToastPositionType = 'top' | 'middle' | 'bottom' // 提示信息框的位置类型
+export type ToastPositionType = 'top' | 'middle-top' | 'middle' | 'bottom' // 提示信息框的位置类型
+
+export type ToastDirection = 'vertical' | 'horizontal' // 提示信息框的排列方向
 
 export type ToastLoadingType = LoadingType // 提示信息加载状态类型
 
 export type ToastOptions = {
   msg?: string
   duration?: number
-  direction?: 'vertical' | 'horizontal'
+  direction?: ToastDirection
   iconName?: ToastIconType
   iconSize?: number
   loadingType?: ToastLoadingType
@@ -71,7 +73,127 @@ export interface Toast {
 
 export const toastProps = {
   ...baseProps,
-  selector: makeStringProp('')
+  /**
+   * 选择器
+   * @type {string}
+   * @default ''
+   */
+  selector: makeStringProp(''),
+  /**
+   * 提示信息
+   * @type {string}
+   * @default ''
+   */
+  msg: {
+    type: String,
+    default: ''
+  },
+  /**
+   * 持续时间
+   * @type {number}
+   * @default 2000
+   */
+  duration: {
+    type: Number,
+    default: 2000
+  },
+  /**
+   * 排列方向
+   * @type {'vertical' | 'horizontal'}
+   * @default 'horizontal'
+   */
+  direction: makeStringProp<ToastDirection>('horizontal'),
+  /**
+   * 图标名称
+   * @type {'success' | 'error' | 'warning' | 'loading' | 'info'}
+   * @default ''
+   */
+  iconName: {
+    type: String as PropType<ToastIconType>,
+    default: ''
+  },
+  /**
+   * 图标大小
+   * @type {number}
+   */
+  iconSize: Number,
+  /**
+   * 加载类型
+   * @type {'outline' | 'ring'}
+   * @default 'outline'
+   */
+  loadingType: makeStringProp<ToastLoadingType>('outline'),
+  /**
+   * 加载颜色
+   * @type {string}
+   * @default '#4D80F0'
+   */
+  loadingColor: {
+    type: String,
+    default: '#4D80F0'
+  },
+  /**
+   * 加载大小
+   * @type {number}
+   */
+  loadingSize: Number,
+  /**
+   * 图标颜色
+   * @type {string}
+   */
+  iconColor: String,
+  /**
+   * 位置
+   * @type {'top' | 'middle-top' | 'middle' | 'bottom'}
+   * @default 'middle-top'
+   */
+  position: makeStringProp<ToastPositionType>('middle-top'),
+  /**
+   * 层级
+   * @type {number}
+   * @default 100
+   */
+  zIndex: {
+    type: Number,
+    default: 100
+  },
+  /**
+   * 是否存在遮罩层
+   * @type {boolean}
+   * @default false
+   */
+  cover: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 图标类名
+   * @type {string}
+   * @default ''
+   */
+  iconClass: {
+    type: String,
+    default: ''
+  },
+  /**
+   * 类名前缀
+   * @type {string}
+   * @default 'wd-icon'
+   */
+  classPrefix: {
+    type: String,
+    default: 'wd-icon'
+  },
+  /**
+   * 完全展示后的回调函数
+   * @type {Function}
+   */
+  opened: Function as PropType<() => void>,
+  /**
+   * 完全关闭时的回调函数
+   * @type {Function}
+   */
+  closed: Function as PropType<() => void>
 }
 
 export type ToastProps = ExtractPropTypes<typeof toastProps>

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

@@ -8,10 +8,10 @@
         :type="loadingType"
         :color="loadingColor"
         :size="loadingSize"
-        :custom-class="`wd-toast__icon ${toastOption.direction === 'vertical' ? 'is-vertical' : ''}`"
+        :custom-class="`wd-toast__icon ${direction === 'vertical' ? 'is-vertical' : ''}`"
       />
       <view
-        :class="`wd-toast__iconWrap wd-toast__icon ${toastOption.direction === 'vertical' ? 'is-vertical' : ''}`"
+        :class="`wd-toast__iconWrap wd-toast__icon ${direction === 'vertical' ? 'is-vertical' : ''}`"
         v-else-if="iconName === 'success' || iconName === 'warning' || iconName === 'info' || iconName === 'error'"
       >
         <view class="wd-toast__iconBox">
@@ -20,7 +20,7 @@
       </view>
       <wd-icon
         v-else-if="iconClass"
-        :custom-class="`wd-toast__icon ${toastOption.direction === 'vertical' ? 'is-vertical' : ''}`"
+        :custom-class="`wd-toast__icon ${direction === 'vertical' ? 'is-vertical' : ''}`"
         :size="iconSize"
         :class-prefix="classPrefix"
         :name="iconClass"
@@ -51,7 +51,7 @@ import wdTransition from '../wd-transition/wd-transition.vue'
 import { computed, inject, onBeforeMount, ref, watch, type CSSProperties } from 'vue'
 import base64 from '../common/base64'
 import { defaultOptions, getToastOptionKey, toastIcon } from '.'
-import { toastProps, type ToastLoadingType, type ToastOptions } from './types'
+import { toastProps, type ToastDirection, type ToastLoadingType, type ToastOptions, type ToastProps } from './types'
 import { addUnit, isDef, isFunction, objToStyle } from '../common/util'
 
 const props = defineProps(toastProps)
@@ -68,6 +68,7 @@ const svgStr = ref<string>('') // 图标
 const cover = ref<boolean>(false) // 是否存在遮罩层
 const classPrefix = ref<string>('wd-icon') // 图标前缀
 const iconClass = ref<string>('') // 图标类名
+const direction = ref<ToastDirection>('horizontal') // toast布局方向
 
 let opened: (() => void) | null = null
 
@@ -111,7 +112,8 @@ const transitionStyle = computed(() => {
     left: 0,
     width: '100%',
     transform: 'translate(0, -50%)',
-    'text-align': 'center'
+    'text-align': 'center',
+    'pointer-events': 'none'
   }
   return objToStyle(style)
 })
@@ -119,7 +121,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' : ''} ${toastOption.value.direction === 'vertical' ? 'is-vertical' : ''}`
+  } ${iconName.value === 'loading' && !msg.value ? 'wd-toast--loading' : ''} ${direction.value === 'vertical' ? 'is-vertical' : ''}`
 })
 
 const svgStyle = computed(() => {
@@ -161,26 +163,29 @@ function buildSvg() {
  * @param option toast选项值
  */
 function reset(option: ToastOptions) {
-  if (option) {
+  show.value = isDef(option.show) ? option.show : false
-    show.value = isDef(option.show) ? option.show : false
 
-    if (show.value) {
+  if (show.value) {
-      iconName.value = isDef(option.iconName!) ? option.iconName! : ''
+    mergeOptionsWithProps(option, props)
-      iconClass.value = isDef(option.iconClass!) ? option.iconClass! : ''
-      msg.value = isDef(option.msg!) ? option.msg! : ''
-      position.value = isDef(option.position!) ? option.position! : 'middle'
-      zIndex.value = isDef(option.zIndex!) ? option.zIndex! : 100
-      loadingType.value = isDef(option.loadingType!) ? option.loadingType! : 'outline'
-      loadingColor.value = isDef(option.loadingColor!) ? option.loadingColor! : '#4D80F0'
-      iconSize.value = isDef(option.iconSize) ? addUnit(option.iconSize) : option.iconSize
-      loadingSize.value = isDef(option.loadingSize) ? addUnit(option.loadingSize) : option.loadingSize
-      cover.value = isDef(option.cover!) ? option.cover! : false
-      classPrefix.value = isDef(option.classPrefix) ? option.classPrefix : 'wd-icon'
-      closed = isFunction(option.closed) ? option.closed : null
-      opened = isFunction(option.opened) ? option.opened : null
-    }
   }
 }
+
+function mergeOptionsWithProps(option: ToastOptions, props: ToastProps) {
+  iconName.value = isDef(option.iconName!) ? option.iconName! : props.iconName
+  iconClass.value = isDef(option.iconClass!) ? option.iconClass! : props.iconClass
+  msg.value = isDef(option.msg!) ? option.msg! : props.msg
+  position.value = isDef(option.position!) ? option.position! : props.position
+  zIndex.value = isDef(option.zIndex!) ? option.zIndex! : props.zIndex
+  loadingType.value = isDef(option.loadingType!) ? option.loadingType! : props.loadingType
+  loadingColor.value = isDef(option.loadingColor!) ? option.loadingColor! : props.loadingColor
+  iconSize.value = isDef(option.iconSize) ? addUnit(option.iconSize) : isDef(props.iconSize) ? addUnit(props.iconSize) : undefined
+  loadingSize.value = isDef(option.loadingSize) ? addUnit(option.loadingSize) : isDef(props.loadingSize) ? addUnit(props.loadingSize) : undefined
+  cover.value = isDef(option.cover!) ? option.cover! : props.cover
+  classPrefix.value = isDef(option.classPrefix) ? option.classPrefix : props.classPrefix
+  direction.value = isDef(option.direction) ? option.direction : props.direction
+  closed = isFunction(option.closed) ? option.closed : isFunction(props.closed) ? props.closed : null
+  opened = isFunction(option.opened) ? option.opened : isFunction(props.opened) ? props.opened : null
+}
 </script>
 <style lang="scss" scoped>
 @import './index.scss';