sard-uniapp 1.26.1 → 1.26.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.
- package/CHANGELOG.md +9 -0
- package/components/popup/README.md +30 -30
- package/components/popup/common.d.ts +17 -17
- package/components/popup/popup.d.ts +1 -1
- package/components/popup/popup.vue +29 -26
- package/components/share-sheet/share-sheet.vue +1 -1
- package/package.json +1 -1
- package/use/useLockScroll.js +1 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
## [1.26.2](https://github.com/sutras/sard-uniapp/compare/v1.26.1...v1.26.2) (2026-01-23)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* 修复弹出框关闭后页面无法滚动的问题 ([f5a7a92](https://github.com/sutras/sard-uniapp/commit/f5a7a92a015d1c6b2cb0ad7ab885b001b14dae0f))
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
1
10
|
## [1.26.1](https://github.com/sutras/sard-uniapp/compare/v1.26.0...v1.26.1) (2026-01-20)
|
|
2
11
|
|
|
3
12
|
|
|
@@ -28,22 +28,22 @@ import Popup from 'sard-uniapp/components/popup/popup.vue'
|
|
|
28
28
|
|
|
29
29
|
### PopupProps
|
|
30
30
|
|
|
31
|
-
| 属性 | 描述
|
|
32
|
-
| --------------------------------- |
|
|
33
|
-
| root-class | 组件根元素类名
|
|
34
|
-
| root-style | 组件根元素样式
|
|
35
|
-
| visible (v-model) | 是否可见
|
|
36
|
-
| duration | 显隐动画时长，单位 ms
|
|
37
|
-
| effect | 显隐效果
|
|
38
|
-
| overlay | 是否显示遮罩
|
|
39
|
-
| overlay-class | 添加到遮罩的类名
|
|
40
|
-
| overlay-style | 添加到遮罩的样式
|
|
41
|
-
| background | 遮罩背景色
|
|
42
|
-
| transparent | 透明遮罩
|
|
43
|
-
| overlay-closable <sup>1.22+</sup> | 是否在点击遮罩层后关闭
|
|
44
|
-
| keep-render <sup>1.24.3+</sup> | 无论刚挂载还是隐藏，都始终不设置 display 为 none，一般用于内部包含计算尺寸的组件的情况
|
|
45
|
-
| lock-scroll <sup>1.25.5+</sup> | 弹出框显示时，是否阻止页面滚动
|
|
46
|
-
| back-press <sup>1.25.7+</sup> | 弹出框显示时，劫持用户的返回操作，`close`: 关闭弹出框、`back`:
|
|
31
|
+
| 属性 | 描述 | 类型 | 默认值 |
|
|
32
|
+
| --------------------------------- | ----------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------- |
|
|
33
|
+
| root-class | 组件根元素类名 | string | - |
|
|
34
|
+
| root-style | 组件根元素样式 | StyleValue | - |
|
|
35
|
+
| visible (v-model) | 是否可见 | boolean | false |
|
|
36
|
+
| duration | 显隐动画时长，单位 ms | number | 300 |
|
|
37
|
+
| effect | 显隐效果 | 'slide-top' \| 'slide-right' \| 'slide-bottom' \| 'slide-left' \| 'zoom' \| 'fade' | 'fade' |
|
|
38
|
+
| overlay | 是否显示遮罩 | boolean | true |
|
|
39
|
+
| overlay-class | 添加到遮罩的类名 | string | - |
|
|
40
|
+
| overlay-style | 添加到遮罩的样式 | string | - |
|
|
41
|
+
| background | 遮罩背景色 | string | - |
|
|
42
|
+
| transparent | 透明遮罩 | boolean | false |
|
|
43
|
+
| overlay-closable <sup>1.22+</sup> | 是否在点击遮罩层后关闭 | boolean | true |
|
|
44
|
+
| keep-render <sup>1.24.3+</sup> | 无论刚挂载还是隐藏，都始终不设置 display 为 none，一般用于内部包含计算尺寸的组件的情况 | boolean | false |
|
|
45
|
+
| lock-scroll <sup>1.25.5+</sup> | 弹出框显示时，是否阻止页面滚动 | boolean | true |
|
|
46
|
+
| back-press <sup>1.25.7+</sup> | 弹出框显示时，劫持用户的返回操作，`close`: 关闭弹出框、`back`: 返回上一页（仅小程序支持） | 'close' \| 'back' | 'close' |
|
|
47
47
|
|
|
48
48
|
### PopupSlots
|
|
49
49
|
|
|
@@ -53,20 +53,20 @@ import Popup from 'sard-uniapp/components/popup/popup.vue'
|
|
|
53
53
|
|
|
54
54
|
### PopupEmits
|
|
55
55
|
|
|
56
|
-
| 事件 | 描述
|
|
57
|
-
| ------------------------------- |
|
|
58
|
-
| overlay-click | 点击遮罩时触发
|
|
59
|
-
| update:visible <sup>1.22+</sup> | 显隐时触发
|
|
60
|
-
| back-press <sup>1.25.7+</sup> | 用户进行返回操作时触发，仅限于 `close
|
|
61
|
-
| visible-hook | 入场/退场动画状态改变时触发
|
|
62
|
-
| before-enter | 入场动画开始前触发
|
|
63
|
-
| enter | 入场动画开始时触发
|
|
64
|
-
| after-enter | 入场动画结束时触发
|
|
65
|
-
| enter-cancelled | 入场动画取消时触发
|
|
66
|
-
| before-leave | 退场动画开始前触发
|
|
67
|
-
| leave | 退场动画开始时触发
|
|
68
|
-
| after-leave | 退场动画结束时触发
|
|
69
|
-
| leave-cancelled | 退场动画取消时触发
|
|
56
|
+
| 事件 | 描述 | 类型 |
|
|
57
|
+
| ------------------------------- | ------------------------------------------------------ | ---------------------------------- |
|
|
58
|
+
| overlay-click | 点击遮罩时触发 | (event: any) => void |
|
|
59
|
+
| update:visible <sup>1.22+</sup> | 显隐时触发 | (visible: boolean) => void |
|
|
60
|
+
| back-press <sup>1.25.7+</sup> | 用户进行返回操作时触发，仅限于 `close`（仅小程序支持） | () => void |
|
|
61
|
+
| visible-hook | 入场/退场动画状态改变时触发 | (name: TransitionHookName) => void |
|
|
62
|
+
| before-enter | 入场动画开始前触发 | () => void |
|
|
63
|
+
| enter | 入场动画开始时触发 | () => void |
|
|
64
|
+
| after-enter | 入场动画结束时触发 | () => void |
|
|
65
|
+
| enter-cancelled | 入场动画取消时触发 | () => void |
|
|
66
|
+
| before-leave | 退场动画开始前触发 | () => void |
|
|
67
|
+
| leave | 退场动画开始时触发 | () => void |
|
|
68
|
+
| after-leave | 退场动画结束时触发 | () => void |
|
|
69
|
+
| leave-cancelled | 退场动画取消时触发 | () => void |
|
|
70
70
|
|
|
71
71
|
## 主题定制
|
|
72
72
|
|
|
@@ -14,7 +14,7 @@ export interface PopupProps {
|
|
|
14
14
|
keepRender?: boolean;
|
|
15
15
|
overlayClosable?: boolean;
|
|
16
16
|
lockScroll?: boolean;
|
|
17
|
-
backPress?: 'close' | 'back'
|
|
17
|
+
backPress?: 'close' | 'back';
|
|
18
18
|
}
|
|
19
19
|
export declare const defaultPopupProps: {
|
|
20
20
|
rootStyle?: (string | false | ((props: {
|
|
@@ -31,7 +31,7 @@ export declare const defaultPopupProps: {
|
|
|
31
31
|
keepRender: boolean;
|
|
32
32
|
overlayClosable: boolean;
|
|
33
33
|
lockScroll: boolean;
|
|
34
|
-
backPress: "close" | "back"
|
|
34
|
+
backPress: "close" | "back";
|
|
35
35
|
}) => string | false | import("vue").CSSProperties | StyleValue[]) | null) | undefined;
|
|
36
36
|
rootClass?: (string | ((props: {
|
|
37
37
|
rootStyle: StyleValue;
|
|
@@ -47,7 +47,7 @@ export declare const defaultPopupProps: {
|
|
|
47
47
|
keepRender: boolean;
|
|
48
48
|
overlayClosable: boolean;
|
|
49
49
|
lockScroll: boolean;
|
|
50
|
-
backPress: "close" | "back"
|
|
50
|
+
backPress: "close" | "back";
|
|
51
51
|
}) => string)) | undefined;
|
|
52
52
|
visible?: (boolean | ((props: {
|
|
53
53
|
rootStyle: StyleValue;
|
|
@@ -63,7 +63,7 @@ export declare const defaultPopupProps: {
|
|
|
63
63
|
keepRender: boolean;
|
|
64
64
|
overlayClosable: boolean;
|
|
65
65
|
lockScroll: boolean;
|
|
66
|
-
backPress: "close" | "back"
|
|
66
|
+
backPress: "close" | "back";
|
|
67
67
|
}) => boolean)) | undefined;
|
|
68
68
|
duration?: (number | ((props: {
|
|
69
69
|
rootStyle: StyleValue;
|
|
@@ -79,7 +79,7 @@ export declare const defaultPopupProps: {
|
|
|
79
79
|
keepRender: boolean;
|
|
80
80
|
overlayClosable: boolean;
|
|
81
81
|
lockScroll: boolean;
|
|
82
|
-
backPress: "close" | "back"
|
|
82
|
+
backPress: "close" | "back";
|
|
83
83
|
}) => number)) | undefined;
|
|
84
84
|
effect?: ("slide-top" | "slide-right" | "slide-bottom" | "slide-left" | "zoom" | "fade" | "full-fade" | ((props: {
|
|
85
85
|
rootStyle: StyleValue;
|
|
@@ -95,7 +95,7 @@ export declare const defaultPopupProps: {
|
|
|
95
95
|
keepRender: boolean;
|
|
96
96
|
overlayClosable: boolean;
|
|
97
97
|
lockScroll: boolean;
|
|
98
|
-
backPress: "close" | "back"
|
|
98
|
+
backPress: "close" | "back";
|
|
99
99
|
}) => "slide-top" | "slide-right" | "slide-bottom" | "slide-left" | "zoom" | "fade" | "full-fade")) | undefined;
|
|
100
100
|
overlay?: (boolean | ((props: {
|
|
101
101
|
rootStyle: StyleValue;
|
|
@@ -111,7 +111,7 @@ export declare const defaultPopupProps: {
|
|
|
111
111
|
keepRender: boolean;
|
|
112
112
|
overlayClosable: boolean;
|
|
113
113
|
lockScroll: boolean;
|
|
114
|
-
backPress: "close" | "back"
|
|
114
|
+
backPress: "close" | "back";
|
|
115
115
|
}) => boolean)) | undefined;
|
|
116
116
|
overlayClass?: (string | ((props: {
|
|
117
117
|
rootStyle: StyleValue;
|
|
@@ -127,7 +127,7 @@ export declare const defaultPopupProps: {
|
|
|
127
127
|
keepRender: boolean;
|
|
128
128
|
overlayClosable: boolean;
|
|
129
129
|
lockScroll: boolean;
|
|
130
|
-
backPress: "close" | "back"
|
|
130
|
+
backPress: "close" | "back";
|
|
131
131
|
}) => string)) | undefined;
|
|
132
132
|
overlayStyle?: (string | ((props: {
|
|
133
133
|
rootStyle: StyleValue;
|
|
@@ -143,7 +143,7 @@ export declare const defaultPopupProps: {
|
|
|
143
143
|
keepRender: boolean;
|
|
144
144
|
overlayClosable: boolean;
|
|
145
145
|
lockScroll: boolean;
|
|
146
|
-
backPress: "close" | "back"
|
|
146
|
+
backPress: "close" | "back";
|
|
147
147
|
}) => string)) | undefined;
|
|
148
148
|
background?: (string | ((props: {
|
|
149
149
|
rootStyle: StyleValue;
|
|
@@ -159,7 +159,7 @@ export declare const defaultPopupProps: {
|
|
|
159
159
|
keepRender: boolean;
|
|
160
160
|
overlayClosable: boolean;
|
|
161
161
|
lockScroll: boolean;
|
|
162
|
-
backPress: "close" | "back"
|
|
162
|
+
backPress: "close" | "back";
|
|
163
163
|
}) => string)) | undefined;
|
|
164
164
|
transparent?: (boolean | ((props: {
|
|
165
165
|
rootStyle: StyleValue;
|
|
@@ -175,7 +175,7 @@ export declare const defaultPopupProps: {
|
|
|
175
175
|
keepRender: boolean;
|
|
176
176
|
overlayClosable: boolean;
|
|
177
177
|
lockScroll: boolean;
|
|
178
|
-
backPress: "close" | "back"
|
|
178
|
+
backPress: "close" | "back";
|
|
179
179
|
}) => boolean)) | undefined;
|
|
180
180
|
keepRender?: (boolean | ((props: {
|
|
181
181
|
rootStyle: StyleValue;
|
|
@@ -191,7 +191,7 @@ export declare const defaultPopupProps: {
|
|
|
191
191
|
keepRender: boolean;
|
|
192
192
|
overlayClosable: boolean;
|
|
193
193
|
lockScroll: boolean;
|
|
194
|
-
backPress: "close" | "back"
|
|
194
|
+
backPress: "close" | "back";
|
|
195
195
|
}) => boolean)) | undefined;
|
|
196
196
|
overlayClosable?: (boolean | ((props: {
|
|
197
197
|
rootStyle: StyleValue;
|
|
@@ -207,7 +207,7 @@ export declare const defaultPopupProps: {
|
|
|
207
207
|
keepRender: boolean;
|
|
208
208
|
overlayClosable: boolean;
|
|
209
209
|
lockScroll: boolean;
|
|
210
|
-
backPress: "close" | "back"
|
|
210
|
+
backPress: "close" | "back";
|
|
211
211
|
}) => boolean)) | undefined;
|
|
212
212
|
lockScroll?: (boolean | ((props: {
|
|
213
213
|
rootStyle: StyleValue;
|
|
@@ -223,9 +223,9 @@ export declare const defaultPopupProps: {
|
|
|
223
223
|
keepRender: boolean;
|
|
224
224
|
overlayClosable: boolean;
|
|
225
225
|
lockScroll: boolean;
|
|
226
|
-
backPress: "close" | "back"
|
|
226
|
+
backPress: "close" | "back";
|
|
227
227
|
}) => boolean)) | undefined;
|
|
228
|
-
backPress?: ("close" | "
|
|
228
|
+
backPress?: ("close" | "back" | ((props: {
|
|
229
229
|
rootStyle: StyleValue;
|
|
230
230
|
rootClass: string;
|
|
231
231
|
visible: boolean;
|
|
@@ -239,8 +239,8 @@ export declare const defaultPopupProps: {
|
|
|
239
239
|
keepRender: boolean;
|
|
240
240
|
overlayClosable: boolean;
|
|
241
241
|
lockScroll: boolean;
|
|
242
|
-
backPress: "close" | "back"
|
|
243
|
-
}) => "close" | "
|
|
242
|
+
backPress: "close" | "back";
|
|
243
|
+
}) => "close" | "back")) | undefined;
|
|
244
244
|
};
|
|
245
245
|
export interface PopupSlots {
|
|
246
246
|
default?(props: Record<string, never>): any;
|
|
@@ -23,7 +23,7 @@ declare const _default_1: __VLS_WithTemplateSlots<import("vue").DefineComponent<
|
|
|
23
23
|
keepRender: boolean;
|
|
24
24
|
overlayClosable: boolean;
|
|
25
25
|
lockScroll: boolean;
|
|
26
|
-
backPress: "close" | "back"
|
|
26
|
+
backPress: "close" | "back";
|
|
27
27
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, Readonly<PopupSlots> & PopupSlots>;
|
|
28
28
|
export default _default_1;
|
|
29
29
|
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<!-- #ifdef MP -->
|
|
3
3
|
<page-container
|
|
4
|
-
v-if="
|
|
4
|
+
v-if="realBackPressVisible"
|
|
5
5
|
:show="visible"
|
|
6
6
|
:duration="0"
|
|
7
7
|
:z-index="0"
|
|
@@ -94,10 +94,10 @@ import {
|
|
|
94
94
|
* @property {boolean} overlayClosable 是否在点击遮罩层后关闭，默认值：true。
|
|
95
95
|
* @property {boolean} keepRender 无论刚挂载还是隐藏，都始终不设置 display 为 none，一般用于内部包含计算尺寸的组件的情况，默认值：false。
|
|
96
96
|
* @property {boolean} lockScroll 弹出框显示时，是否阻止页面滚动，默认值：true。
|
|
97
|
-
* @property {'close' | 'back'
|
|
97
|
+
* @property {'close' | 'back'} backPress 弹出框显示时，劫持用户的返回操作，`close`: 关闭弹出框、`back`: 返回上一页（仅小程序支持），默认值：'close'。
|
|
98
98
|
* @event {(event: any) => void} overlay-click 点击遮罩时触发
|
|
99
99
|
* @event {(visible: boolean) => void} update 显隐时触发
|
|
100
|
-
* @event {() => void} back-press 用户进行返回操作时触发，仅限于 `close
|
|
100
|
+
* @event {() => void} back-press 用户进行返回操作时触发，仅限于 `close`（仅小程序支持）
|
|
101
101
|
* @event {(name: TransitionHookName) => void} visible-hook 入场/退场动画状态改变时触发
|
|
102
102
|
* @event {() => void} before-enter 入场动画开始前触发
|
|
103
103
|
* @event {() => void} enter 入场动画开始时触发
|
|
@@ -182,30 +182,33 @@ export default _defineComponent({
|
|
|
182
182
|
);
|
|
183
183
|
const onBeforeLeave = () => {
|
|
184
184
|
emit("back-press");
|
|
185
|
-
|
|
186
|
-
backPressVisible.value = false;
|
|
187
|
-
setTimeout(() => {
|
|
188
|
-
backPressVisible.value = true;
|
|
189
|
-
}, 50);
|
|
190
|
-
} else {
|
|
191
|
-
emit("update:visible", false);
|
|
192
|
-
}
|
|
185
|
+
emit("update:visible", false);
|
|
193
186
|
};
|
|
194
|
-
const backPressVisible =
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
() =>
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
}
|
|
187
|
+
const backPressVisible = computed(() => {
|
|
188
|
+
return props.backPress === "close" && isTopLayer.value && props.visible;
|
|
189
|
+
});
|
|
190
|
+
const realBackPressVisible = ref(backPressVisible.value);
|
|
191
|
+
const { start: hideBackPressLater, stop: cancelBackPressHide } = useTimeout(
|
|
192
|
+
() => {
|
|
193
|
+
realBackPressVisible.value = false;
|
|
194
|
+
},
|
|
195
|
+
30
|
|
196
|
+
);
|
|
197
|
+
const { start: showBackPressLater, stop: cancelBackPressShow } = useTimeout(
|
|
198
|
+
() => {
|
|
199
|
+
realBackPressVisible.value = true;
|
|
200
|
+
},
|
|
201
|
+
40
|
|
208
202
|
);
|
|
203
|
+
watch(backPressVisible, (visible) => {
|
|
204
|
+
if (visible) {
|
|
205
|
+
cancelBackPressHide();
|
|
206
|
+
showBackPressLater();
|
|
207
|
+
} else {
|
|
208
|
+
cancelBackPressShow();
|
|
209
|
+
hideBackPressLater();
|
|
210
|
+
}
|
|
211
|
+
});
|
|
209
212
|
const pageVisible = ref(true);
|
|
210
213
|
// #ifdef WEB
|
|
211
214
|
onShow(() => {
|
|
@@ -232,7 +235,7 @@ export default _defineComponent({
|
|
|
232
235
|
transitionDuration: props.duration + "ms"
|
|
233
236
|
});
|
|
234
237
|
});
|
|
235
|
-
const __returned__ = { props, emit, bem, zIndex, increaseZIndex, callVisibleHook, keepRenderClass, onVisibleHook, realVisible, transitionClass, onTransitionEnd, onOverlayClick, isTopLayer, onBeforeLeave, backPressVisible,
|
|
238
|
+
const __returned__ = { props, emit, bem, zIndex, increaseZIndex, callVisibleHook, keepRenderClass, onVisibleHook, realVisible, transitionClass, onTransitionEnd, onOverlayClick, isTopLayer, onBeforeLeave, backPressVisible, realBackPressVisible, hideBackPressLater, cancelBackPressHide, showBackPressLater, cancelBackPressShow, pageVisible, popupClass, popupStyle, SarOverlay };
|
|
236
239
|
return __returned__;
|
|
237
240
|
}
|
|
238
241
|
});
|
|
@@ -103,7 +103,7 @@ import {
|
|
|
103
103
|
* @property {boolean} overlayClosable 点击遮罩后是否关闭，默认值：true。
|
|
104
104
|
* @property {boolean} keepRender 无论刚挂载还是隐藏，都始终不设置 display 为 none，一般用于内部包含计算尺寸的组件的情况，默认值：false。
|
|
105
105
|
* @property {boolean} lockScroll 弹出框显示时，是否阻止页面滚动，默认值：true。
|
|
106
|
-
* @property {'close' | 'back'
|
|
106
|
+
* @property {'close' | 'back'} backPress 弹出框显示时，劫持用户的返回操作，`close`: 关闭弹出框、`back`: 返回上一页（仅小程序支持），默认值：'close'。
|
|
107
107
|
* @property {ShareSheetItem[] | ShareSheetItem[][]} itemList 面板选项列表，默认值：[]。
|
|
108
108
|
* @property {string} title 面板标题，默认值：-。
|
|
109
109
|
* @property {string} description 面板描述，默认值：-。
|
package/package.json
CHANGED
package/use/useLockScroll.js
CHANGED
|
@@ -46,9 +46,7 @@ export function useLockScroll(_visible, lockScroll = true) {
|
|
|
46
46
|
}
|
|
47
47
|
});
|
|
48
48
|
onBeforeUnmount(() => {
|
|
49
|
-
|
|
50
|
-
unlock();
|
|
51
|
-
}
|
|
49
|
+
unlock();
|
|
52
50
|
});
|
|
53
51
|
onShow(() => {
|
|
54
52
|
if (visible.value) {
|
|
@@ -67,10 +65,6 @@ export function useLockScroll(_visible, lockScroll = true) {
|
|
|
67
65
|
else {
|
|
68
66
|
unlock();
|
|
69
67
|
}
|
|
70
|
-
}, {
|
|
71
|
-
// 使用同步，避免 visible 为 false 且组件销毁时不执行 watch 回调，
|
|
72
|
-
// 并因 visible 为 false，导致 onBeforeUnmount 中不能执行 unlock。
|
|
73
|
-
flush: 'sync',
|
|
74
68
|
});
|
|
75
69
|
}
|
|
76
70
|
/**
|