Skip to content

Commit ead218b

Browse files
author
xuqingkai
committed
feat: ✨ Toast轻提示增加opened、closed两个钩子
1 parent 50baac8 commit ead218b

File tree

4 files changed

+53
-26
lines changed

4 files changed

+53
-26
lines changed

‎docs/component/toast.md‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -84,19 +84,21 @@ toast.close()
8484

8585
## options
8686

87-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
88-
| ------------ | --------------------------------------------------------------------------- | ------- | ------------------------- | ---------------------- | -------- |
89-
| msg | 消息内容 | string | - | - | - |
90-
| duration | 持续时间，单位 ms，为 0 时表示不自动关闭 | number | - | 2000 | - |
91-
| iconName | 图标类型 | string | success / error / warning | - | - |
92-
| iconSize | 左侧图标尺寸 | string | - | 42px | - |
93-
| iconClass | 图标类目，自定义图标，可以使用 Icon 章节的那些图标类名，iconName 优先级更高 | string | - | - | - |
94-
| customIcon | 自定义图标，开启后可以通过 custom-icon-class 类名自定义图标 | Boolean | - | false | - |
95-
| position | 提示信息框的位置 | string | top / middle / bottom | middle | - |
96-
| zIndex | toast 层级 | number | - | 100 | - |
97-
| loadingType | [加载中图标类型](/component/loading) | string | ring | outline | - |
98-
| loadingColor | [加载中图标颜色](/component/loading) | string | - | #4D80F0 | - |
99-
| cover | 是否存在一个透明遮罩 | boolean | - | `loading`时默认为 true | 1.2.15 |
87+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
88+
| ------------ | --------------------------------------------------------------------------- | ---------- | ------------------------- | ---------------------- | -------- |
89+
| msg | 消息内容 | string | - | - | - |
90+
| duration | 持续时间，单位 ms，为 0 时表示不自动关闭 | number | - | 2000 | - |
91+
| iconName | 图标类型 | string | success / error / warning | - | - |
92+
| iconSize | 左侧图标尺寸 | string | - | 42px | - |
93+
| iconClass | 图标类目，自定义图标，可以使用 Icon 章节的那些图标类名，iconName 优先级更高 | string | - | - | - |
94+
| customIcon | 自定义图标，开启后可以通过 custom-icon-class 类名自定义图标 | Boolean | - | false | - |
95+
| position | 提示信息框的位置 | string | top / middle / bottom | middle | - |
96+
| zIndex | toast 层级 | number | - | 100 | - |
97+
| loadingType | [加载中图标类型](/component/loading) | string | ring | outline | - |
98+
| loadingColor | [加载中图标颜色](/component/loading) | string | - | #4D80F0 | - |
99+
| cover | 是否存在一个透明遮罩 | boolean | - | `loading`时默认为 true | 1.2.15 |
100+
| opened | 完全展示后的回调函数 | `Function` | - | - | 1.2.15 |
101+
| closed | 完全关闭后的回调函数 | `Function` | - | - | 1.2.15 |
100102

101103
## Methods
102104

‎src/pages/toast/Index.vue‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<!--
22
* @Author: weisheng
33
* @Date: 2023-09-20 11:10:44
4-
* @LastEditTime: 2024-04-10 21:14:50
4+
* @LastEditTime: 2024-04-11 13:13:28
55
* @LastEditors: weisheng
66
* @Description:
7-
* @FilePath: /wot-design-uni/src/pages/toast/Index.vue
7+
* @FilePath: \wot-design-uni\src\pages\toast\Index.vue
88
* 记得注释
99
-->
1010
<template>
@@ -54,7 +54,13 @@ function showNormalToast() {
5454
function showTopToast() {
5555
toast.show({
5656
position: 'top',
57-
msg: '提示信息'
57+
msg: '提示信息',
58+
closed() {
59+
console.log(232)
60+
},
61+
opened() {
62+
console.log(2323232)
63+
}
5864
})
5965
}
6066
function showBottomToast() {

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*
22
* @Author: weisheng
33
* @Date: 2023-06-19 12:47:57
4-
* @LastEditTime: 2024-04-10 20:18:34
4+
* @LastEditTime: 2024-04-11 13:03:38
55
* @LastEditors: weisheng
66
* @Description:
77
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-toast\types.ts
@@ -34,6 +34,14 @@ export type ToastOptions = {
3434
* 是否存在遮罩层
3535
*/
3636
cover?: boolean
37+
/**
38+
* 完全展示后的回调函数
39+
*/
40+
opened?: () => void
41+
/**
42+
* 完全关闭时的回调函数
43+
*/
44+
closed?: () => void
3745
}
3846

3947
export interface Toast {

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

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<wd-overlay v-if="cover" :z-index="zIndex" lock-scroll :show="show" custom-style="background-color: transparent;pointer-events: auto;"></wd-overlay>
3-
<wd-transition name="fade" :show="show" :custom-style="transitionStyle">
3+
<wd-transition name="fade" :show="show" :custom-style="transitionStyle" @after-enter="handleAfterEnter" @after-leave="handleAfterLeave">
44
<view :class="rootClass">
55
<!--iconName优先级更高-->
66
<wd-loading v-if="iconName === 'loading'" :type="loadingType" :color="loadingColor" custom-class="wd-toast__icon" :customStyle="loadingStyle" />
@@ -36,7 +36,7 @@ import { computed, inject, onBeforeMount, ref, watch, type CSSProperties } from
3636
import base64 from '../common/base64'
3737
import { defaultOptions, toastDefaultOptionKey, toastIcon } from '.'
3838
import { toastProps, type ToastLoadingType, type ToastOptions } from './types'
39-
import { isDef, objToStyle } from '../common/util'
39+
import { isDef, isFunction, objToStyle } from '../common/util'
4040
4141
const props = defineProps(toastProps)
4242
@@ -52,6 +52,10 @@ const iconSize = ref<number>(42)
5252
const svgStr = ref<string>('') // 图标
5353
const cover = ref<boolean>(false) // 是否存在遮罩层
5454
55+
let opened: (() => void) | null = null
56+
57+
let closed: (() => void) | null = null
58+
5559
const toastOptionKey = props.selector ? toastDefaultOptionKey + props.selector : toastDefaultOptionKey
5660
const toastOption = inject(toastOptionKey, ref<ToastOptions>(defaultOptions)) // toast选项
5761
@@ -79,13 +83,6 @@ watch(
7983
}
8084
)
8185
82-
/**
83-
* 动画自定义样式
84-
*/
85-
const isLoading = computed(() => {
86-
return iconName.value === 'loading'
87-
})
88-
8986
/**
9087
* 动画自定义样式
9188
*/
@@ -123,6 +120,18 @@ onBeforeMount(() => {
123120
buildSvg()
124121
})
125122
123+
function handleAfterEnter() {
124+
if (isFunction(opened)) {
125+
opened()
126+
}
127+
}
128+
129+
function handleAfterLeave() {
130+
if (isFunction(closed)) {
131+
closed()
132+
}
133+
}
134+
126135
function buildSvg() {
127136
if (iconName.value !== 'success' && iconName.value !== 'warning' && iconName.value !== 'info' && iconName.value !== 'error') return
128137
const iconSvg = toastIcon[iconName.value]()
@@ -147,6 +156,8 @@ function reset(option: ToastOptions) {
147156
loadingColor.value = isDef(option.loadingColor!) ? option.loadingColor! : '#4D80F0'
148157
iconSize.value = isDef(option.iconSize!) ? option.iconSize! : 42
149158
cover.value = isDef(option.cover!) ? option.cover! : false
159+
closed = isFunction(option.closed) ? option.closed : null
160+
opened = isFunction(option.opened) ? option.opened : null
150161
}
151162
}
152163
}

0 commit comments

Comments
 (0)