sard-uniapp 1.20.1 → 1.20.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/components/crop-image-agent/common.js +1 -1
  3. package/components/crop-image-agent/crop-image-agent.vue +1 -1
  4. package/components/dialog/README.md +19 -3
  5. package/components/dialog/common.d.ts +0 -1
  6. package/components/dialog/dialog.vue +1 -2
  7. package/components/dialog-agent/common.d.ts +5 -2
  8. package/components/dialog-agent/common.js +2 -2
  9. package/components/dialog-agent/dialog-agent.d.ts +7 -1
  10. package/components/dialog-agent/dialog-agent.vue +123 -9
  11. package/components/dialog-agent/index.d.ts +1 -1
  12. package/components/dialog-agent/index.js +1 -1
  13. package/components/notify/README.md +38 -3
  14. package/components/notify/common.d.ts +5 -1
  15. package/components/notify/index.d.ts +1 -1
  16. package/components/notify/notify.d.ts +14 -7
  17. package/components/notify/notify.vue +25 -4
  18. package/components/notify-agent/common.d.ts +5 -2
  19. package/components/notify-agent/common.js +2 -2
  20. package/components/notify-agent/index.d.ts +1 -1
  21. package/components/notify-agent/index.js +1 -1
  22. package/components/notify-agent/notify-agent.d.ts +7 -1
  23. package/components/notify-agent/notify-agent.vue +90 -5
  24. package/components/popup/common.d.ts +11 -0
  25. package/components/toast/README.md +28 -6
  26. package/components/toast/common.d.ts +2 -1
  27. package/components/toast/toast.d.ts +5 -3
  28. package/components/toast/toast.vue +17 -3
  29. package/components/toast-agent/common.d.ts +5 -2
  30. package/components/toast-agent/common.js +2 -2
  31. package/components/toast-agent/index.d.ts +1 -1
  32. package/components/toast-agent/index.js +1 -1
  33. package/components/toast-agent/toast-agent.d.ts +7 -1
  34. package/components/toast-agent/toast-agent.vue +85 -5
  35. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,12 @@
1
+ ## [1.20.2](https://github.com/sutras/sard-uniapp/compare/v1.20.1...v1.20.2) (2025-07-02)
2
+
3
+
4
+ ### Features
5
+
6
+ * dialog, notify, toast 新增事件 ([54e5c4b](https://github.com/sutras/sard-uniapp/commit/54e5c4b8c8240df6dd77edb01bfee9e8ecabae96))
7
+
8
+
9
+
1
10
  ## [1.20.1](https://github.com/sutras/sard-uniapp/compare/v1.20.0...v1.20.1) (2025-07-02)
2
11
 
3
12
 
@@ -1,4 +1,4 @@
1
- import { getAvailableImperative } from '../../use/useImperative';
1
+ import { getAvailableImperative } from '../../use';
2
2
  import { defaultConfig } from '../config';
3
3
  import { defaultCropImageProps } from '../crop-image/common';
4
4
  export const defaultCropImageAgentProps = () => ({
@@ -10,7 +10,7 @@ import {
10
10
  defaultCropImageAgentProps,
11
11
  imperativeName
12
12
  } from "./common";
13
- import { useImperative } from "../../use/useImperative";
13
+ import { useImperative } from "../../use";
14
14
  export default _defineComponent({
15
15
  components: {
16
16
  SarCropImage,
@@ -139,9 +139,25 @@ type DialogBeforeClose = (
139
139
 
140
140
  继承 [`DialogProps`](#DialogProps) 并有以下额外属性。
141
141
 
142
- | 属性 | 描述 | 类型 | 默认值 |
143
- | ---- | --------------- | ------ | -------- |
144
- | id | 对话框组件的 id | string | 'dialog' |
142
+ | 属性 | 描述 | 类型 | 默认值 |
143
+ | ----------------------------------- | --------------------------- | ---------------------------------- | -------- |
144
+ | id | 对话框组件的 id | string | 'dialog' |
145
+ | onClose <sup>1.20.2+</sup> | 点击关闭按钮或遮罩时调用 | () => void |
146
+ | onCancel <sup>1.20.2+</sup> | 点击取消按钮时调用 | () => void |
147
+ | onConfirm <sup>1.20.2+</sup> | 点击确定按钮时调用 | () => void |
148
+ | onVisibleHook <sup>1.20.2+</sup> | 入场/退场动画状态改变时调用 | (name: TransitionHookName) => void |
149
+ | onBeforeEnter <sup>1.20.2+</sup> | 入场动画开始前调用 | () => void |
150
+ | onEnter <sup>1.20.2+</sup> | 入场动画开始时调用 | () => void |
151
+ | onAfterEnter <sup>1.20.2+</sup> | 入场动画结束时调用 | () => void |
152
+ | onEnterCancelled <sup>1.20.2+</sup> | 入场动画取消时调用 | () => void |
153
+ | onBeforeLeave <sup>1.20.2+</sup> | 退场动画开始前调用 | () => void |
154
+ | onLeave <sup>1.20.2+</sup> | 退场动画开始时调用 | () => void |
155
+ | onAfterLeave <sup>1.20.2+</sup> | 退场动画结束时调用 | () => void |
156
+ | onLeaveCancelled <sup>1.20.2+</sup> | 退场动画取消时调用 | () => void |
157
+
158
+ ### DialogAgentEmits <sup>1.20.2+</sup>
159
+
160
+ 继承 [`DialogEmits`](#DialogEmits)。
145
161
 
146
162
  ### 命令式方法
147
163
 
@@ -25,7 +25,6 @@ export interface DialogProps {
25
25
  duration?: number;
26
26
  cancelProps?: ButtonProps;
27
27
  confirmProps?: ButtonProps;
28
- id?: string;
29
28
  }
30
29
  export declare const defaultDialogProps: {
31
30
  headed: boolean;
@@ -156,8 +156,7 @@ export default _defineComponent({
156
156
  beforeClose: { type: Function, required: false },
157
157
  duration: { type: Number, required: false },
158
158
  cancelProps: { type: Object, required: false },
159
- confirmProps: { type: Object, required: false },
160
- id: { type: String, required: false }
159
+ confirmProps: { type: Object, required: false }
161
160
  }, defaultDialogProps),
162
161
  emits: ["update:visible", "close", "cancel", "confirm", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
163
162
  setup(__props, { expose: __expose, emit: __emit }) {
@@ -1,5 +1,6 @@
1
- import { type DialogProps } from '../dialog/common';
2
- export interface DialogAgentProps extends DialogProps {
1
+ import { type DialogEmits, type DialogProps } from '../dialog/common';
2
+ import { type TransitionHookCallbacks } from '../popup/common';
3
+ export interface DialogAgentProps extends DialogProps, TransitionHookCallbacks {
3
4
  id?: string;
4
5
  onClose?: () => void;
5
6
  onCancel?: () => void;
@@ -14,6 +15,8 @@ export declare const defaultDialogAgentProps: () => {
14
15
  overlayClosable: boolean;
15
16
  duration: number;
16
17
  };
18
+ export interface DialogAgentEmits extends DialogEmits {
19
+ }
17
20
  export declare const imperativeName = "dialog";
18
21
  export interface DialogImperative {
19
22
  show(newProps: Record<string, any>): void;
@@ -1,6 +1,6 @@
1
- import { defaultDialogProps } from '../dialog/common';
1
+ import { defaultDialogProps, } from '../dialog/common';
2
2
  import { defaultConfig } from '../config';
3
- import { getAllImperatives, getAvailableImperative, getImperatives, } from '../../use/useImperative';
3
+ import { getAllImperatives, getAvailableImperative, getImperatives, } from '../../use';
4
4
  export const defaultDialogAgentProps = () => ({
5
5
  ...defaultDialogProps,
6
6
  ...defaultConfig.dialogAgent,
@@ -1,5 +1,11 @@
1
1
  import { type DialogAgentProps } from './common';
2
- declare const _default: import("vue").DefineComponent<DialogAgentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DialogAgentProps> & Readonly<{}>, {
2
+ declare const _default: import("vue").DefineComponent<DialogAgentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
3
+ [x: string]: any;
4
+ } & {
5
+ [x: string]: any;
6
+ }, string, import("vue").PublicProps, Readonly<DialogAgentProps> & Readonly<{
7
+ [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
8
+ }>, {
3
9
  id: string;
4
10
  buttonType: "round" | "text";
5
11
  showConfirm: boolean;
@@ -1,10 +1,36 @@
1
1
  <template>
2
2
  <sar-dialog
3
- v-bind="innerProps"
4
- v-model:visible="innerProps.visible"
5
- @confirm="innerProps.onConfirm"
6
- @close="innerProps.onClose"
7
- @cancel="innerProps.onCancel"
3
+ :root-style="innerProps.rootStyle"
4
+ :root-class="innerProps.rootClass"
5
+ :popup-style="innerProps.popupStyle"
6
+ :popup-class="innerProps.popupClass"
7
+ :visible="innerProps.visible"
8
+ :title="innerProps.title"
9
+ :message="innerProps.message"
10
+ :headed="innerProps.headed"
11
+ :button-type="innerProps.buttonType"
12
+ :show-cancel="innerProps.showCancel"
13
+ :cancel-text="innerProps.cancelText"
14
+ :show-confirm="innerProps.showConfirm"
15
+ :confirm-text="innerProps.confirmText"
16
+ :overlay-closable="innerProps.overlayClosable"
17
+ :before-close="innerProps.beforeClose"
18
+ :duration="innerProps.duration"
19
+ :cancel-props="innerProps.cancelProps"
20
+ :confirm-props="innerProps.confirmProps"
21
+ @update:visible="onUpdateVisible"
22
+ @confirm="onConfirm"
23
+ @close="onClose"
24
+ @cancel="onCancel"
25
+ @visible-hook="onVisibleHook"
26
+ @before-enter="onBeforeEnter"
27
+ @enter="onEnter"
28
+ @after-enter="onAfterEnter"
29
+ @enter-cancelled="onEnterCancelled"
30
+ @before-leave="onBeforeLeave"
31
+ @leave="onLeave"
32
+ @after-leave="onAfterLeave"
33
+ @leave-cancelled="onLeaveCancelled"
8
34
  />
9
35
  </template>
10
36
 
@@ -16,7 +42,7 @@ import {
16
42
  defaultDialogAgentProps,
17
43
  imperativeName
18
44
  } from "./common";
19
- import { useImperative } from "../../use/useImperative";
45
+ import { useImperative } from "../../use";
20
46
  /**
21
47
  * @property {string} rootClass 对话框根元素类名,默认值:-。
22
48
  * @property {StyleValue} rootStyle 对话框根元素样式,默认值:-。
@@ -37,6 +63,31 @@ import { useImperative } from "../../use/useImperative";
37
63
  * @property {ButtonProps} confirmProps 设置确定按钮 props,默认值:-。
38
64
  * @property {ButtonProps} cancelProps 设置取消按钮 props,默认值:-。
39
65
  * @property {string} id 对话框组件的 id,默认值:'dialog'。
66
+ * @property {() => void} onClose 点击关闭按钮或遮罩时调用,默认值:undefined。
67
+ * @property {() => void} onCancel 点击取消按钮时调用,默认值:undefined。
68
+ * @property {() => void} onConfirm 点击确定按钮时调用,默认值:undefined。
69
+ * @property {(name: TransitionHookName) => void} onVisibleHook 入场/退场动画状态改变时调用,默认值:undefined。
70
+ * @property {() => void} onBeforeEnter 入场动画开始前调用,默认值:undefined。
71
+ * @property {() => void} onEnter 入场动画开始时调用,默认值:undefined。
72
+ * @property {() => void} onAfterEnter 入场动画结束时调用,默认值:undefined。
73
+ * @property {() => void} onEnterCancelled 入场动画取消时调用,默认值:undefined。
74
+ * @property {() => void} onBeforeLeave 退场动画开始前调用,默认值:undefined。
75
+ * @property {() => void} onLeave 退场动画开始时调用,默认值:undefined。
76
+ * @property {() => void} onAfterLeave 退场动画结束时调用,默认值:undefined。
77
+ * @property {() => void} onLeaveCancelled 退场动画取消时调用,默认值:undefined。
78
+ * @event {(visible: boolean) => void} update 对话框显隐时触发
79
+ * @event {() => void} close 点击关闭按钮或遮罩时触发
80
+ * @event {() => void} cancel 点击取消按钮时触发
81
+ * @event {() => void} confirm 点击确定按钮时触发
82
+ * @event {(name: TransitionHookName) => void} visible-hook 入场/退场动画状态改变时触发
83
+ * @event {() => void} before-enter 入场动画开始前触发
84
+ * @event {() => void} enter 入场动画开始时触发
85
+ * @event {() => void} after-enter 入场动画结束时触发
86
+ * @event {() => void} enter-cancelled 入场动画取消时触发
87
+ * @event {() => void} before-leave 退场动画开始前触发
88
+ * @event {() => void} leave 退场动画开始时触发
89
+ * @event {() => void} after-leave 退场动画结束时触发
90
+ * @event {() => void} leave-cancelled 退场动画取消时触发
40
91
  */
41
92
  export default _defineComponent({
42
93
  components: {
@@ -71,11 +122,22 @@ export default _defineComponent({
71
122
  beforeClose: { type: Function, required: false },
72
123
  duration: { type: Number, required: false },
73
124
  cancelProps: { type: Object, required: false },
74
- confirmProps: { type: Object, required: false }
125
+ confirmProps: { type: Object, required: false },
126
+ onVisibleHook: { type: Function, required: false },
127
+ onBeforeEnter: { type: Function, required: false },
128
+ onEnter: { type: Function, required: false },
129
+ onAfterEnter: { type: Function, required: false },
130
+ onEnterCancelled: { type: Function, required: false },
131
+ onBeforeLeave: { type: Function, required: false },
132
+ onLeave: { type: Function, required: false },
133
+ onAfterLeave: { type: Function, required: false },
134
+ onLeaveCancelled: { type: Function, required: false }
75
135
  }, defaultDialogAgentProps()),
76
- setup(__props, { expose: __expose }) {
136
+ emits: ["update:visible", "close", "cancel", "confirm", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
137
+ setup(__props, { expose: __expose, emit: __emit }) {
77
138
  __expose();
78
139
  const props = __props;
140
+ const emit = __emit;
79
141
  const innerProps = ref({ ...props });
80
142
  const imperative = {
81
143
  show(newProps) {
@@ -92,12 +154,64 @@ export default _defineComponent({
92
154
  };
93
155
  }
94
156
  };
157
+ const onConfirm = () => {
158
+ emit("confirm");
159
+ innerProps.value.onConfirm?.();
160
+ };
161
+ const onClose = () => {
162
+ emit("close");
163
+ innerProps.value.onClose?.();
164
+ };
165
+ const onCancel = () => {
166
+ emit("cancel");
167
+ innerProps.value.onCancel?.();
168
+ };
169
+ const onUpdateVisible = (visible) => {
170
+ innerProps.value.visible = visible;
171
+ emit("update:visible", visible);
172
+ };
173
+ const onVisibleHook = (name) => {
174
+ emit("visible-hook", name);
175
+ innerProps.value.onVisibleHook?.(name);
176
+ };
177
+ const onBeforeEnter = () => {
178
+ emit("before-enter");
179
+ innerProps.value.onBeforeEnter?.();
180
+ };
181
+ const onEnter = () => {
182
+ emit("enter");
183
+ innerProps.value.onEnter?.();
184
+ };
185
+ const onAfterEnter = () => {
186
+ emit("after-enter");
187
+ innerProps.value.onAfterEnter?.();
188
+ };
189
+ const onEnterCancelled = () => {
190
+ emit("enter-cancelled");
191
+ innerProps.value.onEnterCancelled?.();
192
+ };
193
+ const onBeforeLeave = () => {
194
+ emit("before-leave");
195
+ innerProps.value.onBeforeLeave?.();
196
+ };
197
+ const onLeave = () => {
198
+ emit("leave");
199
+ innerProps.value.onLeave?.();
200
+ };
201
+ const onAfterLeave = () => {
202
+ emit("after-leave");
203
+ innerProps.value.onAfterLeave?.();
204
+ };
205
+ const onLeaveCancelled = () => {
206
+ emit("leave-cancelled");
207
+ innerProps.value.onLeaveCancelled?.();
208
+ };
95
209
  useImperative(
96
210
  imperativeName,
97
211
  imperative,
98
212
  computed(() => innerProps.value.id)
99
213
  );
100
- const __returned__ = { props, innerProps, imperative, SarDialog };
214
+ const __returned__ = { props, emit, innerProps, imperative, onConfirm, onClose, onCancel, onUpdateVisible, onVisibleHook, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled, SarDialog };
101
215
  return __returned__;
102
216
  }
103
217
  });
@@ -1 +1 @@
1
- export { type DialogAgentProps, type DialogOptions, dialog } from './common';
1
+ export { type DialogAgentProps, type DialogOptions, type DialogAgentEmits, dialog, } from './common';
@@ -1 +1 @@
1
- export { dialog } from './common';
1
+ export { dialog, } from './common';
@@ -71,13 +71,48 @@ import { notify } from 'sard-uniapp'
71
71
  | duration | 显隐动画时长,单位 ms | number | 300 |
72
72
  | status-bar <sup>1.12+</sup> | 是否包含状态栏,自定义导航栏时应设为 `true` | boolean | false |
73
73
 
74
+ ### NotifySlots <sup>1.20.2+</sup>
75
+
76
+ | 插槽 | 描述 | 属性 |
77
+ | ------- | -------------- | ---- |
78
+ | default | 自定义默认内容 | - |
79
+
80
+ ### NotifyEmits
81
+
82
+ | 事件 | 描述 | 类型 |
83
+ | ---------------------------------- | --------------------------- | ---------------------------------- |
84
+ | update:visible | 通知框显隐时触发 | (visible: boolean) => void |
85
+ | click <sup>1.20.2+</sup> | 点击通知框时触发 | (event: any) => void |
86
+ | visible-hook <sup>1.20.2+</sup> | 入场/退场动画状态改变时触发 | (name: TransitionHookName) => void |
87
+ | before-enter <sup>1.20.2+</sup> | 入场动画开始前触发 | () => void |
88
+ | enter <sup>1.20.2+</sup> | 入场动画开始时触发 | () => void |
89
+ | after-enter <sup>1.20.2+</sup> | 入场动画结束时触发 | () => void |
90
+ | enter-cancelled <sup>1.20.2+</sup> | 入场动画取消时触发 | () => void |
91
+ | before-leave <sup>1.20.2+</sup> | 退场动画开始前触发 | () => void |
92
+ | leave <sup>1.20.2+</sup> | 退场动画开始时触发 | () => void |
93
+ | after-leave <sup>1.20.2+</sup> | 退场动画结束时触发 | () => void |
94
+ | leave-cancelled <sup>1.20.2+</sup> | 退场动画取消时触发 | () => void |
95
+
74
96
  ### NotifyAgentProps / NotifyOptions
75
97
 
76
98
  继承 [`NotifyProps`](#NotifyProps) 并有以下额外属性。
77
99
 
78
- | 属性 | 描述 | 类型 | 默认值 |
79
- | ---- | ------------- | ------ | -------- |
80
- | id | 通知组件的 id | string | 'notify' |
100
+ | 属性 | 描述 | 类型 | 默认值 |
101
+ | ----------------------------------- | --------------------------- | ---------------------------------- | -------- |
102
+ | id | 通知组件的 id | string | 'notify' |
103
+ | onVisibleHook <sup>1.20.2+</sup> | 入场/退场动画状态改变时调用 | (name: TransitionHookName) => void |
104
+ | onBeforeEnter <sup>1.20.2+</sup> | 入场动画开始前调用 | () => void |
105
+ | onEnter <sup>1.20.2+</sup> | 入场动画开始时调用 | () => void |
106
+ | onAfterEnter <sup>1.20.2+</sup> | 入场动画结束时调用 | () => void |
107
+ | onEnterCancelled <sup>1.20.2+</sup> | 入场动画取消时调用 | () => void |
108
+ | onBeforeLeave <sup>1.20.2+</sup> | 退场动画开始前调用 | () => void |
109
+ | onLeave <sup>1.20.2+</sup> | 退场动画开始时调用 | () => void |
110
+ | onAfterLeave <sup>1.20.2+</sup> | 退场动画结束时调用 | () => void |
111
+ | onLeaveCancelled <sup>1.20.2+</sup> | 退场动画取消时调用 | () => void |
112
+
113
+ ### NotifyAgentEmits <sup>1.20.2+</sup>
114
+
115
+ 继承 [`NotifyEmits`](#NotifyEmits)。
81
116
 
82
117
  ### 命令式方法
83
118
 
@@ -1,4 +1,5 @@
1
1
  import { type StyleValue } from 'vue';
2
+ import { type TransitionHookEmits } from '../popup/common';
2
3
  export interface NotifyProps {
3
4
  rootStyle?: StyleValue;
4
5
  rootClass?: string;
@@ -18,7 +19,10 @@ export declare const defaultNotifyProps: {
18
19
  duration: number;
19
20
  timeout: number;
20
21
  };
21
- export interface NotifyEmits {
22
+ export interface NotifySlots {
23
+ default?(props: Record<string, never>): any;
24
+ }
25
+ export interface NotifyEmits extends TransitionHookEmits {
22
26
  (e: 'click', event: any): void;
23
27
  (e: 'update:visible', event: any): void;
24
28
  }
@@ -1 +1 @@
1
- export type { NotifyProps, NotifyEmits, NotifyExpose } from './common';
1
+ export type { NotifyProps, NotifySlots, NotifyEmits, NotifyExpose, } from './common';
@@ -1,17 +1,24 @@
1
- import { type NotifyProps } from './common';
2
- declare const _default: import("vue").DefineComponent<NotifyProps, {
1
+ import { type NotifyProps, type NotifySlots } from './common';
2
+ declare function __VLS_template(): Readonly<NotifySlots> & NotifySlots;
3
+ declare const __VLS_component: import("vue").DefineComponent<NotifyProps, {
3
4
  reHideLater: () => void;
4
5
  cancelHide: () => void;
5
- }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
6
- click: (event: any) => any;
7
- "update:visible": (event: any) => any;
6
+ }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
7
+ [x: string]: any;
8
+ } & {
9
+ [x: string]: any;
8
10
  }, string, import("vue").PublicProps, Readonly<NotifyProps> & Readonly<{
9
- onClick?: ((event: any) => any) | undefined;
10
- "onUpdate:visible"?: ((event: any) => any) | undefined;
11
+ [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
11
12
  }>, {
12
13
  timeout: number;
13
14
  type: "primary" | "success" | "warning" | "error";
14
15
  position: "top" | "bottom";
15
16
  duration: number;
16
17
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
18
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
17
19
  export default _default;
20
+ type __VLS_WithTemplateSlots<T, S> = T & {
21
+ new (): {
22
+ $slots: S;
23
+ };
24
+ };
@@ -4,10 +4,13 @@
4
4
  :overlay="false"
5
5
  :effect="effect"
6
6
  :duration="duration"
7
+ @visible-hook="onVisibleHook"
7
8
  >
8
- <view :class="notifyClass" :style="notifyStyle">
9
+ <view :class="notifyClass" :style="notifyStyle" @click="onClick">
9
10
  <sar-status-bar v-if="position === 'top' && statusBar" />
10
- <view :class="bem.e('content')">{{ message }}</view>
11
+ <view :class="bem.e('content')">
12
+ <slot>{{ message }}</slot>
13
+ </view>
11
14
  </view>
12
15
  </sar-popup>
13
16
  </template>
@@ -32,6 +35,17 @@ import SarStatusBar from "../status-bar/status-bar.vue";
32
35
  * @property {number} timeout 展示时长(ms),值为 0 时,通知不会消失,默认值:3000。
33
36
  * @property {number} duration 显隐动画时长,单位 ms,默认值:300。
34
37
  * @property {boolean} statusBar 是否包含状态栏,自定义导航栏时应设为 `true`,默认值:false。
38
+ * @event {(visible: boolean) => void} update 通知框显隐时触发
39
+ * @event {(event: any) => void} click 点击通知框时触发
40
+ * @event {(name: TransitionHookName) => void} visible-hook 入场/退场动画状态改变时触发
41
+ * @event {() => void} before-enter 入场动画开始前触发
42
+ * @event {() => void} enter 入场动画开始时触发
43
+ * @event {() => void} after-enter 入场动画结束时触发
44
+ * @event {() => void} enter-cancelled 入场动画取消时触发
45
+ * @event {() => void} before-leave 退场动画开始前触发
46
+ * @event {() => void} leave 退场动画开始时触发
47
+ * @event {() => void} after-leave 退场动画结束时触发
48
+ * @event {() => void} leave-cancelled 退场动画取消时触发
35
49
  */
36
50
  export default _defineComponent({
37
51
  components: {
@@ -58,7 +72,7 @@ export default _defineComponent({
58
72
  duration: { type: Number, required: false },
59
73
  statusBar: { type: Boolean, required: false }
60
74
  }, defaultNotifyProps),
61
- emits: ["click", "update:visible"],
75
+ emits: ["click", "update:visible", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
62
76
  setup(__props, { expose: __expose, emit: __emit }) {
63
77
  const props = __props;
64
78
  const emit = __emit;
@@ -96,6 +110,13 @@ export default _defineComponent({
96
110
  }
97
111
  }
98
112
  );
113
+ const onVisibleHook = (name) => {
114
+ emit("visible-hook", name);
115
+ emit(name);
116
+ };
117
+ const onClick = (event) => {
118
+ emit("click", event);
119
+ };
99
120
  __expose({
100
121
  reHideLater,
101
122
  cancelHide
@@ -117,7 +138,7 @@ export default _defineComponent({
117
138
  props.rootStyle
118
139
  );
119
140
  });
120
- const __returned__ = { props, emit, bem, effect, innerVisible, hideLater, cancelHide, reHideLater, notifyClass, notifyStyle, SarPopup, SarStatusBar };
141
+ const __returned__ = { props, emit, bem, effect, innerVisible, hideLater, cancelHide, reHideLater, onVisibleHook, onClick, notifyClass, notifyStyle, SarPopup, SarStatusBar };
121
142
  return __returned__;
122
143
  }
123
144
  });
@@ -1,5 +1,6 @@
1
- import { type NotifyProps } from '../notify/common';
2
- export interface NotifyAgentProps extends NotifyProps {
1
+ import { type NotifyEmits, type NotifyProps } from '../notify/common';
2
+ import { type TransitionHookCallbacks } from '../popup/common';
3
+ export interface NotifyAgentProps extends NotifyProps, TransitionHookCallbacks {
3
4
  id?: string;
4
5
  }
5
6
  export declare const defaultNotifyAgentProps: () => {
@@ -9,6 +10,8 @@ export declare const defaultNotifyAgentProps: () => {
9
10
  duration: number;
10
11
  timeout: number;
11
12
  };
13
+ export interface NotifyAgentEmits extends NotifyEmits {
14
+ }
12
15
  export declare const imperativeName = "notify";
13
16
  export interface NotifyImperative {
14
17
  show(newProps: Record<string, any>): void;
@@ -1,6 +1,6 @@
1
- import { defaultNotifyProps } from '../notify/common';
1
+ import { defaultNotifyProps, } from '../notify/common';
2
2
  import { defaultConfig } from '../config';
3
- import { getAllImperatives, getAvailableImperative, getImperatives, } from '../../use/useImperative';
3
+ import { getAllImperatives, getAvailableImperative, getImperatives, } from '../../use';
4
4
  export const defaultNotifyAgentProps = () => ({
5
5
  ...defaultNotifyProps,
6
6
  ...defaultConfig.notifyAgent,
@@ -1 +1 @@
1
- export { type NotifyAgentProps, type NotifyOptions, notify } from './common';
1
+ export { type NotifyAgentProps, type NotifyOptions, type NotifyAgentEmits, notify, } from './common';
@@ -1 +1 @@
1
- export { notify } from './common';
1
+ export { notify, } from './common';
@@ -1,5 +1,11 @@
1
1
  import { type NotifyAgentProps } from './common';
2
- declare const _default: import("vue").DefineComponent<NotifyAgentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NotifyAgentProps> & Readonly<{}>, {
2
+ declare const _default: import("vue").DefineComponent<NotifyAgentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
3
+ [x: string]: any;
4
+ } & {
5
+ [x: string]: any;
6
+ }, string, import("vue").PublicProps, Readonly<NotifyAgentProps> & Readonly<{
7
+ [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
8
+ }>, {
3
9
  timeout: number;
4
10
  type: "primary" | "success" | "warning" | "error";
5
11
  id: string;
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <sar-notify
3
3
  ref="elRef"
4
- v-model:visible="innerProps.visible"
4
+ :visible="innerProps.visible"
5
5
  :root-style="innerProps.rootStyle"
6
6
  :root-class="innerProps.rootClass"
7
7
  :type="innerProps.type"
@@ -12,6 +12,17 @@
12
12
  :timeout="innerProps.timeout"
13
13
  :duration="innerProps.duration"
14
14
  :status-bar="innerProps.statusBar"
15
+ @click="onClick"
16
+ @update:visible="onUpdateVisible"
17
+ @visible-hook="onVisibleHook"
18
+ @before-enter="onBeforeEnter"
19
+ @enter="onEnter"
20
+ @after-enter="onAfterEnter"
21
+ @enter-cancelled="onEnterCancelled"
22
+ @before-leave="onBeforeLeave"
23
+ @leave="onLeave"
24
+ @after-leave="onAfterLeave"
25
+ @leave-cancelled="onLeaveCancelled"
15
26
  />
16
27
  </template>
17
28
 
@@ -23,7 +34,7 @@ import {
23
34
  imperativeName,
24
35
  defaultNotifyAgentProps
25
36
  } from "./common";
26
- import { useImperative } from "../../use/useImperative";
37
+ import { useImperative } from "../../use";
27
38
  /**
28
39
  * @property {'primary' | 'success' | 'warning' | 'error'} type 加载类型,默认值:'primary'。
29
40
  * @property {string} message 通知内容,默认值:-。
@@ -35,6 +46,26 @@ import { useImperative } from "../../use/useImperative";
35
46
  * @property {number} duration 显隐动画时长,单位 ms,默认值:300。
36
47
  * @property {boolean} statusBar 是否包含状态栏,自定义导航栏时应设为 `true`,默认值:false。
37
48
  * @property {string} id 通知组件的 id,默认值:'notify'。
49
+ * @property {(name: TransitionHookName) => void} onVisibleHook 入场/退场动画状态改变时调用,默认值:undefined。
50
+ * @property {() => void} onBeforeEnter 入场动画开始前调用,默认值:undefined。
51
+ * @property {() => void} onEnter 入场动画开始时调用,默认值:undefined。
52
+ * @property {() => void} onAfterEnter 入场动画结束时调用,默认值:undefined。
53
+ * @property {() => void} onEnterCancelled 入场动画取消时调用,默认值:undefined。
54
+ * @property {() => void} onBeforeLeave 退场动画开始前调用,默认值:undefined。
55
+ * @property {() => void} onLeave 退场动画开始时调用,默认值:undefined。
56
+ * @property {() => void} onAfterLeave 退场动画结束时调用,默认值:undefined。
57
+ * @property {() => void} onLeaveCancelled 退场动画取消时调用,默认值:undefined。
58
+ * @event {(visible: boolean) => void} update 通知框显隐时触发
59
+ * @event {(event: any) => void} click 点击通知框时触发
60
+ * @event {(name: TransitionHookName) => void} visible-hook 入场/退场动画状态改变时触发
61
+ * @event {() => void} before-enter 入场动画开始前触发
62
+ * @event {() => void} enter 入场动画开始时触发
63
+ * @event {() => void} after-enter 入场动画结束时触发
64
+ * @event {() => void} enter-cancelled 入场动画取消时触发
65
+ * @event {() => void} before-leave 退场动画开始前触发
66
+ * @event {() => void} leave 退场动画开始时触发
67
+ * @event {() => void} after-leave 退场动画结束时触发
68
+ * @event {() => void} leave-cancelled 退场动画取消时触发
38
69
  */
39
70
  export default _defineComponent({
40
71
  components: {
@@ -59,11 +90,22 @@ export default _defineComponent({
59
90
  position: { type: String, required: false },
60
91
  timeout: { type: Number, required: false },
61
92
  duration: { type: Number, required: false },
62
- statusBar: { type: Boolean, required: false }
93
+ statusBar: { type: Boolean, required: false },
94
+ onVisibleHook: { type: Function, required: false },
95
+ onBeforeEnter: { type: Function, required: false },
96
+ onEnter: { type: Function, required: false },
97
+ onAfterEnter: { type: Function, required: false },
98
+ onEnterCancelled: { type: Function, required: false },
99
+ onBeforeLeave: { type: Function, required: false },
100
+ onLeave: { type: Function, required: false },
101
+ onAfterLeave: { type: Function, required: false },
102
+ onLeaveCancelled: { type: Function, required: false }
63
103
  }, defaultNotifyAgentProps()),
64
- setup(__props, { expose: __expose }) {
104
+ emits: ["click", "update:visible", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
105
+ setup(__props, { expose: __expose, emit: __emit }) {
65
106
  __expose();
66
107
  const props = __props;
108
+ const emit = __emit;
67
109
  const innerProps = ref({ ...props });
68
110
  const elRef = ref();
69
111
  const imperative = {
@@ -83,12 +125,55 @@ export default _defineComponent({
83
125
  elRef.value?.cancelHide();
84
126
  }
85
127
  };
128
+ const onClick = (event) => {
129
+ emit("click", event);
130
+ };
131
+ const onUpdateVisible = (visible) => {
132
+ innerProps.value.visible = visible;
133
+ emit("update:visible", visible);
134
+ };
135
+ const onVisibleHook = (name) => {
136
+ emit("visible-hook", name);
137
+ innerProps.value.onVisibleHook?.(name);
138
+ };
139
+ const onBeforeEnter = () => {
140
+ emit("before-enter");
141
+ innerProps.value.onBeforeEnter?.();
142
+ };
143
+ const onEnter = () => {
144
+ emit("enter");
145
+ innerProps.value.onEnter?.();
146
+ };
147
+ const onAfterEnter = () => {
148
+ emit("after-enter");
149
+ innerProps.value.onAfterEnter?.();
150
+ };
151
+ const onEnterCancelled = () => {
152
+ emit("enter-cancelled");
153
+ innerProps.value.onEnterCancelled?.();
154
+ };
155
+ const onBeforeLeave = () => {
156
+ emit("before-leave");
157
+ innerProps.value.onBeforeLeave?.();
158
+ };
159
+ const onLeave = () => {
160
+ emit("leave");
161
+ innerProps.value.onLeave?.();
162
+ };
163
+ const onAfterLeave = () => {
164
+ emit("after-leave");
165
+ innerProps.value.onAfterLeave?.();
166
+ };
167
+ const onLeaveCancelled = () => {
168
+ emit("leave-cancelled");
169
+ innerProps.value.onLeaveCancelled?.();
170
+ };
86
171
  useImperative(
87
172
  imperativeName,
88
173
  imperative,
89
174
  computed(() => innerProps.value.id)
90
175
  );
91
- const __returned__ = { props, innerProps, elRef, imperative, SarNotify };
176
+ const __returned__ = { props, emit, innerProps, elRef, imperative, onClick, onUpdateVisible, onVisibleHook, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled, SarNotify };
92
177
  return __returned__;
93
178
  }
94
179
  });
@@ -32,6 +32,17 @@ export interface TransitionHookEmits {
32
32
  (e: 'leave-cancelled'): void;
33
33
  (e: 'visible-hook', name: TransitionHookName): void;
34
34
  }
35
+ export interface TransitionHookCallbacks {
36
+ onVisibleHook?: (name: TransitionHookName) => void;
37
+ onBeforeEnter?: () => void;
38
+ onEnter?: () => void;
39
+ onAfterEnter?: () => void;
40
+ onEnterCancelled?: () => void;
41
+ onBeforeLeave?: () => void;
42
+ onLeave?: () => void;
43
+ onAfterLeave?: () => void;
44
+ onLeaveCancelled?: () => void;
45
+ }
35
46
  export interface PopupEmits extends TransitionHookEmits {
36
47
  (e: 'overlay-click', event: any): void;
37
48
  }
@@ -60,17 +60,39 @@ import { toast } from 'sard-uniapp'
60
60
 
61
61
  ### ToastEmits
62
62
 
63
- | 事件 | 描述 | 类型 |
64
- | -------------- | ---------------- | -------------------------- |
65
- | update:visible | 对话框显隐时触发 | (visible: boolean) => void |
63
+ | 事件 | 描述 | 类型 |
64
+ | ---------------------------------- | --------------------------- | ---------------------------------- |
65
+ | update:visible | 提示框显隐时触发 | (visible: boolean) => void |
66
+ | visible-hook <sup>1.20.2+</sup> | 入场/退场动画状态改变时触发 | (name: TransitionHookName) => void |
67
+ | before-enter <sup>1.20.2+</sup> | 入场动画开始前触发 | () => void |
68
+ | enter <sup>1.20.2+</sup> | 入场动画开始时触发 | () => void |
69
+ | after-enter <sup>1.20.2+</sup> | 入场动画结束时触发 | () => void |
70
+ | enter-cancelled <sup>1.20.2+</sup> | 入场动画取消时触发 | () => void |
71
+ | before-leave <sup>1.20.2+</sup> | 退场动画开始前触发 | () => void |
72
+ | leave <sup>1.20.2+</sup> | 退场动画开始时触发 | () => void |
73
+ | after-leave <sup>1.20.2+</sup> | 退场动画结束时触发 | () => void |
74
+ | leave-cancelled <sup>1.20.2+</sup> | 退场动画取消时触发 | () => void |
66
75
 
67
76
  ### ToastAgentProps / ToastOptions
68
77
 
69
78
  继承 [`ToastProps`](#ToastProps) 并有以下额外属性。
70
79
 
71
- | 属性 | 描述 | 类型 | 默认值 |
72
- | ---- | ------------- | ------ | ------- |
73
- | id | 提示组件的 id | string | 'toast' |
80
+ | 属性 | 描述 | 类型 | 默认值 |
81
+ | ----------------------------------- | --------------------------- | ---------------------------------- | ------- |
82
+ | id | 提示组件的 id | string | 'toast' |
83
+ | onVisibleHook <sup>1.20.2+</sup> | 入场/退场动画状态改变时调用 | (name: TransitionHookName) => void |
84
+ | onBeforeEnter <sup>1.20.2+</sup> | 入场动画开始前调用 | () => void |
85
+ | onEnter <sup>1.20.2+</sup> | 入场动画开始时调用 | () => void |
86
+ | onAfterEnter <sup>1.20.2+</sup> | 入场动画结束时调用 | () => void |
87
+ | onEnterCancelled <sup>1.20.2+</sup> | 入场动画取消时调用 | () => void |
88
+ | onBeforeLeave <sup>1.20.2+</sup> | 退场动画开始前调用 | () => void |
89
+ | onLeave <sup>1.20.2+</sup> | 退场动画开始时调用 | () => void |
90
+ | onAfterLeave <sup>1.20.2+</sup> | 退场动画结束时调用 | () => void |
91
+ | onLeaveCancelled <sup>1.20.2+</sup> | 退场动画取消时调用 | () => void |
92
+
93
+ ### ToastAgentEmits <sup>1.20.2+</sup>
94
+
95
+ 继承 [`ToastEmits`](#ToastEmits)。
74
96
 
75
97
  ### 命令式方法
76
98
 
@@ -1,4 +1,5 @@
1
1
  import { type StyleValue } from 'vue';
2
+ import { type TransitionHookEmits } from '../popup/common';
2
3
  export interface ToastProps {
3
4
  rootStyle?: StyleValue;
4
5
  rootClass?: string;
@@ -18,7 +19,7 @@ export declare const defaultToastProps: {
18
19
  timeout: number;
19
20
  duration: number;
20
21
  };
21
- export interface ToastEmits {
22
+ export interface ToastEmits extends TransitionHookEmits {
22
23
  (e: 'update:visible', visible: boolean): void;
23
24
  }
24
25
  export interface ToastExpose {
@@ -2,10 +2,12 @@ import { type ToastProps } from './common';
2
2
  declare const _default: import("vue").DefineComponent<ToastProps, {
3
3
  reHideLater: () => void;
4
4
  cancelHide: () => void;
5
- }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
6
- "update:visible": (visible: boolean) => any;
5
+ }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
6
+ [x: string]: any;
7
+ } & {
8
+ [x: string]: any;
7
9
  }, string, import("vue").PublicProps, Readonly<ToastProps> & Readonly<{
8
- "onUpdate:visible"?: ((visible: boolean) => any) | undefined;
10
+ [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
9
11
  }>, {
10
12
  timeout: number;
11
13
  type: "text" | "loading" | "success" | "fail";
@@ -6,6 +6,7 @@
6
6
  :transparent="transparent"
7
7
  :root-style="popupStyle"
8
8
  effect="fade"
9
+ @visible-hook="onVisibleHook"
9
10
  >
10
11
  <view :class="toastClass" :style="toastStyle">
11
12
  <view v-if="type !== 'text'" :class="iconClass">
@@ -44,7 +45,16 @@ export const mapIdToast = {};
44
45
  * @property {boolean} transparent 使背景透明,默认值:false。
45
46
  * @property {number} timeout 提示的延迟时间,单位 ms,默认值:1500。
46
47
  * @property {number} duration 显隐动画时长,单位 ms,默认值:300。
47
- * @event {(visible: boolean) => void} update 对话框显隐时触发
48
+ * @event {(visible: boolean) => void} update 提示框显隐时触发
49
+ * @event {(name: TransitionHookName) => void} visible-hook 入场/退场动画状态改变时触发
50
+ * @event {() => void} before-enter 入场动画开始前触发
51
+ * @event {() => void} enter 入场动画开始时触发
52
+ * @event {() => void} after-enter 入场动画结束时触发
53
+ * @event {() => void} enter-cancelled 入场动画取消时触发
54
+ * @event {() => void} before-leave 退场动画开始前触发
55
+ * @event {() => void} leave 退场动画开始时触发
56
+ * @event {() => void} after-leave 退场动画结束时触发
57
+ * @event {() => void} leave-cancelled 退场动画取消时触发
48
58
  */
49
59
  export default _defineComponent({
50
60
  components: {
@@ -66,7 +76,7 @@ export default _defineComponent({
66
76
  timeout: { type: Number, required: false },
67
77
  duration: { type: Number, required: false }
68
78
  }, defaultToastProps),
69
- emits: ["update:visible"],
79
+ emits: ["update:visible", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
70
80
  setup(__props, { expose: __expose, emit: __emit }) {
71
81
  const props = __props;
72
82
  const emit = __emit;
@@ -98,6 +108,10 @@ export default _defineComponent({
98
108
  }
99
109
  }
100
110
  );
111
+ const onVisibleHook = (name) => {
112
+ emit("visible-hook", name);
113
+ emit(name);
114
+ };
101
115
  __expose({
102
116
  reHideLater,
103
117
  cancelHide
@@ -138,7 +152,7 @@ export default _defineComponent({
138
152
  bem.em("icon", "loading", props.type === "loading")
139
153
  );
140
154
  });
141
- const __returned__ = { mapIdToast, props, emit, bem, innerVisible, hideLater, cancelHide, reHideLater, toastClass, toastStyle, popupStyle, iconClass, SarPopup, SarLoading, SarIcon };
155
+ const __returned__ = { mapIdToast, props, emit, bem, innerVisible, hideLater, cancelHide, reHideLater, onVisibleHook, toastClass, toastStyle, popupStyle, iconClass, SarPopup, SarLoading, SarIcon };
142
156
  return __returned__;
143
157
  }
144
158
  });
@@ -1,5 +1,6 @@
1
- import { type ToastProps } from '../toast/common';
2
- export interface ToastAgentProps extends ToastProps {
1
+ import { type TransitionHookCallbacks } from '../popup/common';
2
+ import { type ToastEmits, type ToastProps } from '../toast/common';
3
+ export interface ToastAgentProps extends ToastProps, TransitionHookCallbacks {
3
4
  id?: string;
4
5
  }
5
6
  export declare const defaultToastAgentProps: () => {
@@ -10,6 +11,8 @@ export declare const defaultToastAgentProps: () => {
10
11
  timeout: number;
11
12
  duration: number;
12
13
  };
14
+ export interface ToastAgentEmits extends ToastEmits {
15
+ }
13
16
  export declare const imperativeName = "toast";
14
17
  export interface ToastImperative {
15
18
  show(newProps: Record<string, any>): void;
@@ -1,6 +1,6 @@
1
- import { getAllImperatives, getAvailableImperative, getImperatives, } from '../../use/useImperative';
1
+ import { getAllImperatives, getAvailableImperative, getImperatives, } from '../../use';
2
2
  import { defaultConfig } from '../config';
3
- import { defaultToastProps } from '../toast/common';
3
+ import { defaultToastProps, } from '../toast/common';
4
4
  export const defaultToastAgentProps = () => ({
5
5
  ...defaultToastProps,
6
6
  ...defaultConfig.toastAgent,
@@ -1 +1 @@
1
- export { type ToastAgentProps, type ToastOptions, toast } from './common';
1
+ export { type ToastAgentProps, type ToastOptions, type ToastAgentEmits, toast, } from './common';
@@ -1 +1 @@
1
- export { toast } from './common';
1
+ export { toast, } from './common';
@@ -1,5 +1,11 @@
1
1
  import { type ToastAgentProps } from './common';
2
- declare const _default: import("vue").DefineComponent<ToastAgentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToastAgentProps> & Readonly<{}>, {
2
+ declare const _default: import("vue").DefineComponent<ToastAgentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
3
+ [x: string]: any;
4
+ } & {
5
+ [x: string]: any;
6
+ }, string, import("vue").PublicProps, Readonly<ToastAgentProps> & Readonly<{
7
+ [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
8
+ }>, {
3
9
  timeout: number;
4
10
  type: "text" | "loading" | "success" | "fail";
5
11
  id: string;
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <sar-toast
3
3
  ref="elRef"
4
- v-model:visible="innerProps.visible"
4
+ :visible="innerProps.visible"
5
5
  :root-style="innerProps.rootStyle"
6
6
  :root-class="innerProps.rootClass"
7
7
  :type="innerProps.type"
@@ -11,6 +11,16 @@
11
11
  :transparent="innerProps.transparent"
12
12
  :timeout="innerProps.timeout"
13
13
  :duration="innerProps.duration"
14
+ @update:visible="onUpdateVisible"
15
+ @visible-hook="onVisibleHook"
16
+ @before-enter="onBeforeEnter"
17
+ @enter="onEnter"
18
+ @after-enter="onAfterEnter"
19
+ @enter-cancelled="onEnterCancelled"
20
+ @before-leave="onBeforeLeave"
21
+ @leave="onLeave"
22
+ @after-leave="onAfterLeave"
23
+ @leave-cancelled="onLeaveCancelled"
14
24
  />
15
25
  </template>
16
26
 
@@ -22,7 +32,7 @@ import {
22
32
  imperativeName,
23
33
  defaultToastAgentProps
24
34
  } from "./common";
25
- import { useImperative } from "../../use/useImperative";
35
+ import { useImperative } from "../../use";
26
36
  /**
27
37
  * @property {'text' | 'loading' | 'success' | 'fail'} type 提示框类型,默认值:'text'。
28
38
  * @property {string | number} title 标题,默认值:-。
@@ -33,6 +43,25 @@ import { useImperative } from "../../use/useImperative";
33
43
  * @property {number} timeout 提示的延迟时间,单位 ms,默认值:1500。
34
44
  * @property {number} duration 显隐动画时长,单位 ms,默认值:300。
35
45
  * @property {string} id 提示组件的 id,默认值:'toast'。
46
+ * @property {(name: TransitionHookName) => void} onVisibleHook 入场/退场动画状态改变时调用,默认值:undefined。
47
+ * @property {() => void} onBeforeEnter 入场动画开始前调用,默认值:undefined。
48
+ * @property {() => void} onEnter 入场动画开始时调用,默认值:undefined。
49
+ * @property {() => void} onAfterEnter 入场动画结束时调用,默认值:undefined。
50
+ * @property {() => void} onEnterCancelled 入场动画取消时调用,默认值:undefined。
51
+ * @property {() => void} onBeforeLeave 退场动画开始前调用,默认值:undefined。
52
+ * @property {() => void} onLeave 退场动画开始时调用,默认值:undefined。
53
+ * @property {() => void} onAfterLeave 退场动画结束时调用,默认值:undefined。
54
+ * @property {() => void} onLeaveCancelled 退场动画取消时调用,默认值:undefined。
55
+ * @event {(visible: boolean) => void} update 提示框显隐时触发
56
+ * @event {(name: TransitionHookName) => void} visible-hook 入场/退场动画状态改变时触发
57
+ * @event {() => void} before-enter 入场动画开始前触发
58
+ * @event {() => void} enter 入场动画开始时触发
59
+ * @event {() => void} after-enter 入场动画结束时触发
60
+ * @event {() => void} enter-cancelled 入场动画取消时触发
61
+ * @event {() => void} before-leave 退场动画开始前触发
62
+ * @event {() => void} leave 退场动画开始时触发
63
+ * @event {() => void} after-leave 退场动画结束时触发
64
+ * @event {() => void} leave-cancelled 退场动画取消时触发
36
65
  */
37
66
  export default _defineComponent({
38
67
  components: {
@@ -56,11 +85,22 @@ export default _defineComponent({
56
85
  overlay: { type: Boolean, required: false },
57
86
  transparent: { type: Boolean, required: false },
58
87
  timeout: { type: Number, required: false },
59
- duration: { type: Number, required: false }
88
+ duration: { type: Number, required: false },
89
+ onVisibleHook: { type: Function, required: false },
90
+ onBeforeEnter: { type: Function, required: false },
91
+ onEnter: { type: Function, required: false },
92
+ onAfterEnter: { type: Function, required: false },
93
+ onEnterCancelled: { type: Function, required: false },
94
+ onBeforeLeave: { type: Function, required: false },
95
+ onLeave: { type: Function, required: false },
96
+ onAfterLeave: { type: Function, required: false },
97
+ onLeaveCancelled: { type: Function, required: false }
60
98
  }, defaultToastAgentProps()),
61
- setup(__props, { expose: __expose }) {
99
+ emits: ["update:visible", "before-enter", "enter", "after-enter", "enter-cancelled", "before-leave", "leave", "after-leave", "leave-cancelled", "visible-hook"],
100
+ setup(__props, { expose: __expose, emit: __emit }) {
62
101
  __expose();
63
102
  const props = __props;
103
+ const emit = __emit;
64
104
  const innerProps = ref({ ...props });
65
105
  const elRef = ref();
66
106
  const imperative = {
@@ -80,12 +120,52 @@ export default _defineComponent({
80
120
  elRef.value?.cancelHide();
81
121
  }
82
122
  };
123
+ const onUpdateVisible = (visible) => {
124
+ innerProps.value.visible = visible;
125
+ emit("update:visible", visible);
126
+ };
127
+ const onVisibleHook = (name) => {
128
+ emit("visible-hook", name);
129
+ innerProps.value.onVisibleHook?.(name);
130
+ };
131
+ const onBeforeEnter = () => {
132
+ emit("before-enter");
133
+ innerProps.value.onBeforeEnter?.();
134
+ };
135
+ const onEnter = () => {
136
+ emit("enter");
137
+ innerProps.value.onEnter?.();
138
+ };
139
+ const onAfterEnter = () => {
140
+ emit("after-enter");
141
+ innerProps.value.onAfterEnter?.();
142
+ };
143
+ const onEnterCancelled = () => {
144
+ emit("enter-cancelled");
145
+ innerProps.value.onEnterCancelled?.();
146
+ };
147
+ const onBeforeLeave = () => {
148
+ emit("before-leave");
149
+ innerProps.value.onBeforeLeave?.();
150
+ };
151
+ const onLeave = () => {
152
+ emit("leave");
153
+ innerProps.value.onLeave?.();
154
+ };
155
+ const onAfterLeave = () => {
156
+ emit("after-leave");
157
+ innerProps.value.onAfterLeave?.();
158
+ };
159
+ const onLeaveCancelled = () => {
160
+ emit("leave-cancelled");
161
+ innerProps.value.onLeaveCancelled?.();
162
+ };
83
163
  useImperative(
84
164
  imperativeName,
85
165
  imperative,
86
166
  computed(() => innerProps.value.id)
87
167
  );
88
- const __returned__ = { props, innerProps, elRef, imperative, SarToast };
168
+ const __returned__ = { props, emit, innerProps, elRef, imperative, onUpdateVisible, onVisibleHook, onBeforeEnter, onEnter, onAfterEnter, onEnterCancelled, onBeforeLeave, onLeave, onAfterLeave, onLeaveCancelled, SarToast };
89
169
  return __returned__;
90
170
  }
91
171
  });
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "id": "sard-uniapp",
3
3
  "name": "sard-uniapp",
4
4
  "displayName": "sard-uniapp",
5
- "version": "1.20.1",
5
+ "version": "1.20.2",
6
6
  "description": "sard-uniapp 是一套基于 Uniapp + Vue3 框架开发的兼容多端的 UI 组件库",
7
7
  "main": "index.js",
8
8
  "scripts": {