feat: ✨ MessageBox支持确认前置处理钩子beforeConfirm

✅ Closes: #229

Author: Moonofweisheng

docs/component/message-box.md

@@ -158,6 +158,42 @@ function withSlot() {
 }
 ```
 
+## 确认前置处理
+
+设置 `beforeConfirm` 函数，在用户选择图片点击确认后，会执行 `beforeConfirm` 函数，接收 { resolve }，开发者可以在确认前进行处理，并通过 `resolve` 函数告知组件是否确定通过，`resolve` 接受 1 个 `boolean` 值，`resolve(true)` 表示选项通过，`resolve(false)` 表示选项不通过，不通过时不会完成确认操作。
+
+```html
+<wd-toast />
+<wd-message-box />
+<wd-button @click="beforeConfirm">beforeConfirm</wd-button>
+```
+```typescript
+import { useMessage, useToast } from '@/uni_modules/wot-design-uni'
+const message = useMessage()
+const toast = useToast()
+
+function beforeConfirm() {
+  message
+    .confirm({
+      msg: '是否删除',
+      title: '提示',
+      beforeConfirm: ({ resolve }) => {
+        toast.loading('删除中...')
+        setTimeout(() => {
+          toast.close()
+          resolve(true)
+          toast.success('删除成功')
+        }, 2000)
+      }
+    })
+    .then(() => {})
+    .catch((error) => {
+      console.log(error)
+    })
+}
+
+```
+
 ---
 
 弹框在点击确定和取消按钮时，会返回一个 promise 对象，用 then 接收“确定”按钮事件，用 catch 接收“取消”按钮事件。传入的 action 值为:'confirm'、'cancel'、'modal'。

docs/component/toast.md

@@ -84,18 +84,19 @@ 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      | -        |
+| 参数         | 说明                                                                        | 类型    | 可选值                    | 默认值                 | 最低版本 |
+| ------------ | --------------------------------------------------------------------------- | ------- | ------------------------- | ---------------------- | -------- |
+| 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   |
 
 ## Methods
 

src/pages/messageBox/Index.vue

@@ -27,14 +27,19 @@
     <demo-block title="使用wd-message-box组件，通过slot插入其他组件内容">
       <wd-button @click="withSlot">custom</wd-button>
     </demo-block>
+
+    <demo-block title="使用beforeConfirm钩子，在弹框确认前，可以进行一些操作">
+      <wd-button @click="beforeConfirm">beforeConfirm</wd-button>
+    </demo-block>
   </page-wraper>
 </template>
 <script lang="ts" setup>
-import { useMessage } from '@/uni_modules/wot-design-uni'
+import { useMessage, useToast } from '@/uni_modules/wot-design-uni'
 import { ref } from 'vue'
 const rate = ref<number>(1)
 const value1 = ref<string>('')
 
+const toast = useToast()
 const message = useMessage()
 const message1 = useMessage('wd-message-box-slot')
 
@@ -77,6 +82,27 @@ function alertWithLongChar() {
     title: '标题'
   })
 }
+
+function beforeConfirm() {
+  message
+    .confirm({
+      msg: '是否删除',
+      title: '提示',
+      beforeConfirm: ({ resolve }) => {
+        toast.loading('删除中...')
+        setTimeout(() => {
+          toast.close()
+          resolve(true)
+          toast.success('删除成功')
+        }, 3000)
+      }
+    })
+    .then(() => {})
+    .catch((error) => {
+      console.log(error)
+    })
+}
+
 function withSlot() {
   message1
     .confirm({

src/pages/toast/Index.vue

@@ -1,3 +1,12 @@
+<!--
+ * @Author: weisheng
+ * @Date: 2023-09-20 11:10:44
+ * @LastEditTime: 2024-04-10 21:14:50
+ * @LastEditors: weisheng
+ * @Description: 
+ * @FilePath: /wot-design-uni/src/pages/toast/Index.vue
+ * 记得注释
+-->
 <template>
   <view>
     <page-wraper>

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

@@ -1,16 +1,20 @@
 /*
  * @Author: weisheng
  * @Date: 2024-04-08 22:34:01
- * @LastEditTime: 2024-04-09 22:07:26
+ * @LastEditTime: 2024-04-10 12:58:10
  * @LastEditors: weisheng
  * @Description:
- * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-message-box/types.ts
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-message-box\types.ts
  * 记得注释
  */
 import { baseProps } from '../common/props'
 
 export type MessageType = 'alert' | 'confirm' | 'prompt'
 
+export type MessageBeforeConfirmOption = {
+  resolve: (isPass: boolean) => void
+}
+
 export type MessageOptions = {
   /**
    * 标题
@@ -78,6 +82,10 @@ export type MessageOptions = {
    * 弹层内容懒渲染，触发展示时才渲染内容
    */
   lazyRender?: boolean
+  /**
+   * 确认前钩子
+   */
+  beforeConfirm?: (options: MessageBeforeConfirmOption) => void
 }
 
 export type ActionType = 'confirm' | 'cancel' | 'modal'

src/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue

@@ -59,9 +59,16 @@ export default {
 
 <script lang="ts" setup>
 import { computed, inject, ref, watch } from 'vue'
-import { messageBoxProps, type InputValidate, type MessageOptions, type MessageType } from './types'
+import {
+  messageBoxProps,
+  type InputValidate,
+  type MessageBeforeConfirmOption,
+  type MessageOptions,
+  type MessageResult,
+  type MessageType
+} from './types'
 import { defaultOptions, messageDefaultOptionKey } from '.'
-import { isDef } from '../common/util'
+import { isDef, isFunction } from '../common/util'
 import { useTranslate } from '../composables/useTranslate'
 
 const props = defineProps(messageBoxProps)
@@ -83,10 +90,9 @@ const messageOption = inject(messageOptionKey, ref<MessageOptions>(defaultOption
  * 消息文案
  */
 const msg = ref<string>('')
-// eslint-disable-next-line @typescript-eslint/ban-types
-let onConfirm: Function | null = null
-// eslint-disable-next-line @typescript-eslint/ban-types
-let onCancel: Function | null = null
+let onConfirm: ((res: MessageResult) => void) | null = null
+let onCancel: ((res: MessageResult) => void) | null = null
+let beforeConfirm: ((options: MessageBeforeConfirmOption) => void) | null = null
 const show = ref<boolean>(false)
 /**
  * 标题
@@ -189,29 +195,53 @@ function toggleModal(action: 'confirm' | 'cancel' | 'modal') {
   if (type.value === 'prompt' && action === 'confirm' && !validate()) {
     return
   }
-  show.value = false
   switch (action) {
     case 'confirm':
-      onConfirm &&
-        onConfirm({
+      if (beforeConfirm) {
+        beforeConfirm({
+          resolve: (isPass) => {
+            if (isPass) {
+              handleConfirm({
+                action: action,
+                value: inputValue.value
+              })
+            }
+          }
+        })
+      } else {
+        handleConfirm({
           action: action,
           value: inputValue.value
         })
+      }
       break
     case 'cancel':
-      onCancel &&
-        onCancel({
-          action: action
-        })
+      handleCancel({
+        action: action
+      })
       break
     default:
-      onCancel &&
-        onCancel({
-          action: 'modal'
-        })
+      handleCancel({
+        action: 'modal'
+      })
       break
   }
 }
+
+function handleConfirm(result: MessageResult) {
+  show.value = false
+  if (isFunction(onConfirm)) {
+    onConfirm(result)
+  }
+}
+
+function handleCancel(result: MessageResult) {
+  show.value = false
+  if (isFunction(onCancel)) {
+    onCancel(result)
+  }
+}
+
 /**
  * @description 如果存在校验规则行为，则进行判断校验是否通过规则。默认不存在校验直接铜鼓。
  * @return {Boolean} 是否通过校验
@@ -269,6 +299,7 @@ function reset(option: MessageOptions) {
     inputValidate = option.inputValidate!
     onConfirm = (option as any).onConfirm
     onCancel = (option as any).onCancel
+    beforeConfirm = option.beforeConfirm!
     inputError.value = option.inputError!
     showErr.value = option.showErr!
     zIndex.value = option.zIndex!

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

@@ -1,7 +1,7 @@
 /*
  * @Author: weisheng
  * @Date: 2024-03-29 13:29:57
- * @LastEditTime: 2024-04-01 19:13:51
+ * @LastEditTime: 2024-04-10 20:18:47
  * @LastEditors: weisheng
  * @Description:
  * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-toast\index.ts
@@ -52,8 +52,8 @@ export function useToast(selector: string = ''): Toast {
       show: true
     }) as ToastOptions
     // 开始渲染，并在 duration ms之后执行清除
+    timer && clearTimeout(timer)
     if (toastOption.value.duration && toastOption.value.duration > 0) {
-      timer && clearTimeout(timer)
       timer = setTimeout(() => {
         timer && clearTimeout(timer)
         close()
@@ -63,7 +63,8 @@ export function useToast(selector: string = ''): Toast {
 
   const loading = createMethod({
     iconName: 'loading',
-    duration: 0
+    duration: 0,
+    cover: true
   })
   const success = createMethod({
     iconName: 'success',

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

@@ -1,10 +1,10 @@
 /*
  * @Author: weisheng
  * @Date: 2023-06-19 12:47:57
- * @LastEditTime: 2024-03-14 21:18:15
+ * @LastEditTime: 2024-04-10 20:18:34
  * @LastEditors: weisheng
  * @Description:
- * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-toast\type.ts
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-toast\types.ts
  * 记得注释
  */
 import type { ExtractPropTypes } from 'vue'
@@ -30,6 +30,10 @@ export type ToastOptions = {
   position?: ToastPositionType
   show?: boolean
   zIndex?: number
+  /**
+   * 是否存在遮罩层
+   */
+  cover?: boolean
 }
 
 export interface Toast {

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

@@ -1,4 +1,5 @@
 <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">
     <view :class="rootClass">
       <!--iconName优先级更高-->
@@ -31,7 +32,7 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import { computed, inject, onBeforeMount, ref, watch } from 'vue'
+import { computed, inject, onBeforeMount, ref, watch, type CSSProperties } from 'vue'
 import base64 from '../common/base64'
 import { defaultOptions, toastDefaultOptionKey, toastIcon } from '.'
 import { toastProps, type ToastLoadingType, type ToastOptions } from './types'
@@ -49,6 +50,7 @@ const loadingType = ref<ToastLoadingType>('outline')
 const loadingColor = ref<string>('#4D80F0')
 const iconSize = ref<number>(42)
 const svgStr = ref<string>('') // 图标
+const cover = ref<boolean>(false) // 是否存在遮罩层
 
 const toastOptionKey = props.selector ? toastDefaultOptionKey + props.selector : toastDefaultOptionKey
 const toastOption = inject(toastOptionKey, ref<ToastOptions>(defaultOptions)) // toast选项
@@ -77,11 +79,18 @@ watch(
   }
 )
 
+/**
+ * 动画自定义样式
+ */
+const isLoading = computed(() => {
+  return iconName.value === 'loading'
+})
+
 /**
  * 动画自定义样式
  */
 const transitionStyle = computed(() => {
-  const style: Record<string, string | number> = {
+  const style: CSSProperties = {
     'z-index': zIndex.value,
     position: 'fixed',
     top: '50%',
@@ -97,7 +106,7 @@ const transitionStyle = computed(() => {
  * 加载自定义样式
  */
 const loadingStyle = computed(() => {
-  const style: Record<string, string | number> = {
+  const style: CSSProperties = {
     display: 'inline-block',
     'margin-right': '16px'
   }
@@ -137,6 +146,7 @@ function reset(option: ToastOptions) {
       loadingType.value = isDef(option.loadingType!) ? option.loadingType! : 'outline'
       loadingColor.value = isDef(option.loadingColor!) ? option.loadingColor! : '#4D80F0'
       iconSize.value = isDef(option.iconSize!) ? option.iconSize! : 42
+      cover.value = isDef(option.cover!) ? option.cover! : false
     }
   }
 }