mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
feat: ✨ Toast轻提示增加opened、closed两个钩子
This commit is contained in:
xuqingkai
parent
50baac8762
commit
ead218b87b
@ -84,19 +84,21 @@ toast.close()
|
||||
|
||||
## options
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| ------------ | --------------------------------------------------------------------------- | ------- | ------------------------- | ---------------------- | -------- |
|
||||
| msg | 消息内容 | string | - | - | - |
|
||||
| duration | 持续时间，单位 ms，为 0 时表示不自动关闭 | number | - | 2000 | - |
|
||||
| iconName | 图标类型 | string | success / error / warning | - | - |
|
||||
| iconSize | 左侧图标尺寸 | string | - | 42px | - |
|
||||
| iconClass | 图标类目，自定义图标，可以使用 Icon 章节的那些图标类名，iconName 优先级更高 | string | - | - | - |
|
||||
| customIcon | 自定义图标，开启后可以通过 custom-icon-class 类名自定义图标 | Boolean | - | false | - |
|
||||
| position | 提示信息框的位置 | string | top / middle / bottom | middle | - |
|
||||
| zIndex | toast 层级 | number | - | 100 | - |
|
||||
| loadingType | [加载中图标类型](/component/loading) | string | ring | outline | - |
|
||||
| loadingColor | [加载中图标颜色](/component/loading) | string | - | #4D80F0 | - |
|
||||
| cover | 是否存在一个透明遮罩 | boolean | - | `loading`时默认为 true | 1.2.15 |
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| ------------ | --------------------------------------------------------------------------- | ---------- | ------------------------- | ---------------------- | -------- |
|
||||
| msg | 消息内容 | string | - | - | - |
|
||||
| duration | 持续时间，单位 ms，为 0 时表示不自动关闭 | number | - | 2000 | - |
|
||||
| iconName | 图标类型 | string | success / error / warning | - | - |
|
||||
| iconSize | 左侧图标尺寸 | string | - | 42px | - |
|
||||
| iconClass | 图标类目，自定义图标，可以使用 Icon 章节的那些图标类名，iconName 优先级更高 | string | - | - | - |
|
||||
| customIcon | 自定义图标，开启后可以通过 custom-icon-class 类名自定义图标 | Boolean | - | false | - |
|
||||
| position | 提示信息框的位置 | string | top / middle / bottom | middle | - |
|
||||
| zIndex | toast 层级 | number | - | 100 | - |
|
||||
| loadingType | [加载中图标类型](/component/loading) | string | ring | outline | - |
|
||||
| loadingColor | [加载中图标颜色](/component/loading) | string | - | #4D80F0 | - |
|
||||
| cover | 是否存在一个透明遮罩 | boolean | - | `loading`时默认为 true | 1.2.15 |
|
||||
| opened | 完全展示后的回调函数 | `Function` | - | - | 1.2.15 |
|
||||
| closed | 完全关闭后的回调函数 | `Function` | - | - | 1.2.15 |
|
||||
|
||||
## Methods
|
||||
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!--
|
||||
* @Author: weisheng
|
||||
* @Date: 2023-09-20 11:10:44
|
||||
* @LastEditTime: 2024-04-10 21:14:50
|
||||
* @LastEditTime: 2024-04-11 13:13:28
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @FilePath: /wot-design-uni/src/pages/toast/Index.vue
|
||||
* @FilePath: \wot-design-uni\src\pages\toast\Index.vue
|
||||
* 记得注释
|
||||
-->
|
||||
<template>
|
||||
@ -54,7 +54,13 @@ function showNormalToast() {
|
||||
function showTopToast() {
|
||||
toast.show({
|
||||
position: 'top',
|
||||
msg: '提示信息'
|
||||
msg: '提示信息',
|
||||
closed() {
|
||||
console.log(232)
|
||||
},
|
||||
opened() {
|
||||
console.log(2323232)
|
||||
}
|
||||
})
|
||||
}
|
||||
function showBottomToast() {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
/*
|
||||
* @Author: weisheng
|
||||
* @Date: 2023-06-19 12:47:57
|
||||
* @LastEditTime: 2024-04-10 20:18:34
|
||||
* @LastEditTime: 2024-04-11 13:03:38
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-toast\types.ts
|
||||
@ -34,6 +34,14 @@ export type ToastOptions = {
|
||||
* 是否存在遮罩层
|
||||
*/
|
||||
cover?: boolean
|
||||
/**
|
||||
* 完全展示后的回调函数
|
||||
*/
|
||||
opened?: () => void
|
||||
/**
|
||||
* 完全关闭时的回调函数
|
||||
*/
|
||||
closed?: () => void
|
||||
}
|
||||
|
||||
export interface Toast {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<wd-overlay v-if="cover" :z-index="zIndex" lock-scroll :show="show" custom-style="background-color: transparent;pointer-events: auto;"></wd-overlay>
|
||||
<wd-transition name="fade" :show="show" :custom-style="transitionStyle">
|
||||
<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" custom-class="wd-toast__icon" :customStyle="loadingStyle" />
|
||||
@ -36,7 +36,7 @@ import { computed, inject, onBeforeMount, ref, watch, type CSSProperties } from
|
||||
import base64 from '../common/base64'
|
||||
import { defaultOptions, toastDefaultOptionKey, toastIcon } from '.'
|
||||
import { toastProps, type ToastLoadingType, type ToastOptions } from './types'
|
||||
import { isDef, objToStyle } from '../common/util'
|
||||
import { isDef, isFunction, objToStyle } from '../common/util'
|
||||
|
||||
const props = defineProps(toastProps)
|
||||
|
||||
@ -52,6 +52,10 @@ const iconSize = ref<number>(42)
|
||||
const svgStr = ref<string>('') // 图标
|
||||
const cover = ref<boolean>(false) // 是否存在遮罩层
|
||||
|
||||
let opened: (() => void) | null = null
|
||||
|
||||
let closed: (() => void) | null = null
|
||||
|
||||
const toastOptionKey = props.selector ? toastDefaultOptionKey + props.selector : toastDefaultOptionKey
|
||||
const toastOption = inject(toastOptionKey, ref<ToastOptions>(defaultOptions)) // toast选项
|
||||
|
||||
@ -79,13 +83,6 @@ watch(
|
||||
}
|
||||
)
|
||||
|
||||
/**
|
||||
* 动画自定义样式
|
||||
*/
|
||||
const isLoading = computed(() => {
|
||||
return iconName.value === 'loading'
|
||||
})
|
||||
|
||||
/**
|
||||
* 动画自定义样式
|
||||
*/
|
||||
@ -123,6 +120,18 @@ onBeforeMount(() => {
|
||||
buildSvg()
|
||||
})
|
||||
|
||||
function handleAfterEnter() {
|
||||
if (isFunction(opened)) {
|
||||
opened()
|
||||
}
|
||||
}
|
||||
|
||||
function handleAfterLeave() {
|
||||
if (isFunction(closed)) {
|
||||
closed()
|
||||
}
|
||||
}
|
||||
|
||||
function buildSvg() {
|
||||
if (iconName.value !== 'success' && iconName.value !== 'warning' && iconName.value !== 'info' && iconName.value !== 'error') return
|
||||
const iconSvg = toastIcon[iconName.value]()
|
||||
@ -147,6 +156,8 @@ function reset(option: ToastOptions) {
|
||||
loadingColor.value = isDef(option.loadingColor!) ? option.loadingColor! : '#4D80F0'
|
||||
iconSize.value = isDef(option.iconSize!) ? option.iconSize! : 42
|
||||
cover.value = isDef(option.cover!) ? option.cover! : false
|
||||
closed = isFunction(option.closed) ? option.closed : null
|
||||
opened = isFunction(option.opened) ? option.opened : null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user