vue-popup-plus 1.3.3 → 1.4.0
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/dist/vue-popup-plus.d.ts +288 -151
- package/dist/vue-popup-plus.js +166 -148
- package/dist/vue-popup-plus.umd.cjs +2 -2
- package/package.json +1 -1
package/dist/vue-popup-plus.d.ts
CHANGED
|
@@ -12,18 +12,25 @@ declare type Animation_2 = IAnimations[keyof IAnimations];
|
|
|
12
12
|
declare type ComponentInjectKeys = {
|
|
13
13
|
/**
|
|
14
14
|
* 当前组件所在弹出层的实例ID
|
|
15
|
+
*
|
|
15
16
|
* - 可用于销毁当前弹出层
|
|
16
17
|
* - 使用示例:
|
|
18
|
+
*
|
|
17
19
|
* ```ts
|
|
18
20
|
* // 弹出层渲染的所有子代组件中
|
|
19
21
|
* import { inject } from 'vue'
|
|
20
|
-
* import {
|
|
22
|
+
* import {
|
|
23
|
+
* usePopup,
|
|
24
|
+
* POPUP_COMPONENT_INJECTS,
|
|
25
|
+
* } from 'vue-popup-plus'
|
|
21
26
|
*
|
|
22
27
|
* // 获取弹出层控制器
|
|
23
28
|
* const popup = usePopup()
|
|
24
29
|
*
|
|
25
30
|
* // 获取当前组件所在弹出层的实例ID
|
|
26
|
-
* const instanceId = inject(
|
|
31
|
+
* const instanceId = inject(
|
|
32
|
+
* POPUP_COMPONENT_INJECTS.INSTANCE_ID
|
|
33
|
+
* )
|
|
27
34
|
*
|
|
28
35
|
* // 销毁当前弹出层
|
|
29
36
|
* popup.destroy(instanceId)
|
|
@@ -32,21 +39,30 @@ declare type ComponentInjectKeys = {
|
|
|
32
39
|
INSTANCE_ID: InjectionKey<InstanceId>;
|
|
33
40
|
/**
|
|
34
41
|
* 弹出层视图样式
|
|
42
|
+
*
|
|
35
43
|
* - 可在弹出层内部组件内获取弹出层根级视图组件的样式
|
|
36
44
|
* - 使用示例:
|
|
45
|
+
*
|
|
37
46
|
* ```ts
|
|
38
47
|
* // 弹出层渲染的所有子代组件中
|
|
39
48
|
* import { inject } from 'vue'
|
|
40
|
-
* import {
|
|
49
|
+
* import {
|
|
50
|
+
* usePopup,
|
|
51
|
+
* POPUP_COMPONENT_INJECTS,
|
|
52
|
+
* } from 'vue-popup-plus'
|
|
41
53
|
*
|
|
42
54
|
* // 获取弹出层控制器
|
|
43
55
|
* const popup = usePopup()
|
|
44
56
|
*
|
|
45
57
|
* // 获取当前组件所在弹出层的实例ID
|
|
46
|
-
* const instanceId = inject(
|
|
58
|
+
* const instanceId = inject(
|
|
59
|
+
* POPUP_COMPONENT_INJECTS.INSTANCE_ID
|
|
60
|
+
* )
|
|
47
61
|
*
|
|
48
62
|
* // 获取弹出层根级视图组件的样式
|
|
49
|
-
* const computedViewStyle = inject(
|
|
63
|
+
* const computedViewStyle = inject(
|
|
64
|
+
* POPUP_COMPONENT_INJECTS.COMPUTED_VIEW_STYLE
|
|
65
|
+
* )
|
|
50
66
|
* ```
|
|
51
67
|
*/
|
|
52
68
|
COMPUTED_VIEW_STYLE: InjectionKey<PopupViewStyle>;
|
|
@@ -62,30 +78,36 @@ declare type ControllerPrototype = Record<string, string | boolean | number | sy
|
|
|
62
78
|
|
|
63
79
|
declare type ControllerPrototypeFunctionValue = (this: IController, ...args: any[]) => any;
|
|
64
80
|
|
|
65
|
-
declare type CoreConfig = Required<
|
|
81
|
+
declare type CoreConfig = Required<CreateOption>;
|
|
66
82
|
|
|
67
|
-
export declare type
|
|
83
|
+
export declare type CreateOption = {
|
|
68
84
|
/**
|
|
69
85
|
* 弹出层 zIndex 基础值
|
|
70
|
-
*
|
|
86
|
+
*
|
|
87
|
+
* - 默认为1000,每次生成弹出层时,除非 render() 方法传入
|
|
88
|
+
* zIndex,否则使用此基础值,每次使用后会自动递增
|
|
71
89
|
*/
|
|
72
90
|
zIndex?: number;
|
|
73
91
|
/**
|
|
74
92
|
* 是否自动禁用滚动
|
|
93
|
+
*
|
|
75
94
|
* - 默认为 true
|
|
76
95
|
* - 开启后,弹出层显示时会自动禁用页面滚动
|
|
77
96
|
*/
|
|
78
97
|
autoDisableScroll?: boolean;
|
|
79
98
|
/**
|
|
80
99
|
* 弹出层控制器挂载在 Vue 实例上的属性名
|
|
81
|
-
*
|
|
100
|
+
*
|
|
101
|
+
* - 默认为 $popup ,这在使用 选项式 API 时可以在组件内通过 this.$popup
|
|
102
|
+
* 访问控制器实例,可以使用该属性自定义挂载属性名
|
|
82
103
|
* - 使用示例:
|
|
104
|
+
*
|
|
83
105
|
* ```ts
|
|
84
106
|
* // main.ts
|
|
85
107
|
* import { createPopup } from 'vue-popup-plus'
|
|
86
108
|
*
|
|
87
109
|
* const popup = createPopup({
|
|
88
|
-
* prototypeName: '$customPopup'
|
|
110
|
+
* prototypeName: '$customPopup',
|
|
89
111
|
* })
|
|
90
112
|
*
|
|
91
113
|
* // 组件内
|
|
@@ -93,8 +115,11 @@ export declare type CoreOptions = {
|
|
|
93
115
|
* component: Demo,
|
|
94
116
|
* })
|
|
95
117
|
* ```
|
|
96
|
-
*
|
|
118
|
+
*
|
|
119
|
+
* - 注意,如果你使用 TypeScript,则自定义属性名称需要手动同步添加类型扩展,扩展代码可以放在一个
|
|
120
|
+
* .ts 文件,或是一个影响整个项目的 *.d.ts 文件中。
|
|
97
121
|
* - 扩展代码示例:
|
|
122
|
+
*
|
|
98
123
|
* ```ts
|
|
99
124
|
* // 扩展自定义属性名类型
|
|
100
125
|
* declare module 'vue' {
|
|
@@ -102,25 +127,34 @@ export declare type CoreOptions = {
|
|
|
102
127
|
* $customPopup: typeof popup
|
|
103
128
|
* }
|
|
104
129
|
* }
|
|
130
|
+
* ```
|
|
105
131
|
*/
|
|
106
132
|
prototypeName?: string;
|
|
107
133
|
/**
|
|
108
134
|
* 开启调试模式
|
|
135
|
+
*
|
|
109
136
|
* - 默认为 false
|
|
110
|
-
* -
|
|
137
|
+
* - 注意:开启调试模式可能会影响到性能,不建议在生产环境开启。
|
|
138
|
+
* - 开启后,所有的弹出层将以 Vue app 应用实例的方式创建,可通过 Vue DevTools
|
|
139
|
+
* 开发者工具直接访问到内部的相关组件,方便开发者调试。
|
|
111
140
|
*/
|
|
112
141
|
debugMode?: boolean;
|
|
113
142
|
};
|
|
114
143
|
|
|
115
144
|
/**
|
|
116
|
-
*
|
|
117
|
-
*
|
|
145
|
+
* 创建一个弹出层控制器实例
|
|
146
|
+
*
|
|
147
|
+
* - 该实例需要通过 app.use() 安装后才能使用
|
|
148
|
+
*
|
|
149
|
+
* @param options 创建配置,具体请参考 {@link CreateOption}
|
|
118
150
|
* @returns 弹出层控制器实例
|
|
119
151
|
*/
|
|
120
|
-
export declare function createPopup(options?:
|
|
152
|
+
export declare function createPopup(options?: CreateOption): IController;
|
|
121
153
|
|
|
122
154
|
export declare const definePlugin: IDefinePlugin;
|
|
123
155
|
|
|
156
|
+
declare type ExtractPluginOption<TPlugin extends PopupPlugin> = TPlugin extends PopupPlugin<infer TOption> ? TOption : never;
|
|
157
|
+
|
|
124
158
|
declare interface IAnimations extends PopupCustomAnimations {
|
|
125
159
|
/**
|
|
126
160
|
* 无动画
|
|
@@ -137,7 +171,7 @@ declare interface IAnimations extends PopupCustomAnimations {
|
|
|
137
171
|
/**
|
|
138
172
|
* 缩放缩小
|
|
139
173
|
*/
|
|
140
|
-
readonly
|
|
174
|
+
readonly SCALE_REDUCE: 'scale-reduce';
|
|
141
175
|
/**
|
|
142
176
|
* 顶部飞入
|
|
143
177
|
*/
|
|
@@ -157,35 +191,46 @@ declare interface IAnimations extends PopupCustomAnimations {
|
|
|
157
191
|
}
|
|
158
192
|
|
|
159
193
|
declare interface IController extends PopupCustomProperties {
|
|
194
|
+
/**
|
|
195
|
+
* 版本号
|
|
196
|
+
*/
|
|
197
|
+
readonly version: string;
|
|
160
198
|
/**
|
|
161
199
|
* 安装插件
|
|
200
|
+
*
|
|
162
201
|
* @param {App} app - Vue应用实例
|
|
163
202
|
* @returns {void}
|
|
164
203
|
*/
|
|
165
204
|
install(app: App): void;
|
|
166
205
|
/**
|
|
167
206
|
* 安装插件
|
|
207
|
+
*
|
|
168
208
|
* - 可安装使用 `definePlugin` 方法定义的插件
|
|
169
209
|
* - 具体请参考{@link IDefinePlugin}
|
|
170
210
|
*/
|
|
171
|
-
use(plugin:
|
|
211
|
+
use<TOption extends PluginOption, TPlugin extends PopupPlugin<TOption>>(plugin: TPlugin, options?: ExtractPluginOption<TPlugin>): void;
|
|
172
212
|
/**
|
|
173
|
-
*
|
|
174
|
-
*
|
|
175
|
-
*
|
|
213
|
+
* 渲染弹出层
|
|
214
|
+
*
|
|
215
|
+
* - 渲染参数 `component`
|
|
216
|
+
* 是唯一的必填项,其他渲染参数具体请参考{@link RenderOption}
|
|
217
|
+
* - 返回值是弹出层的实例 id ,用于调用 destroy() 方法销毁弹出层
|
|
176
218
|
*/
|
|
177
|
-
render(options:
|
|
219
|
+
render(options: RenderOption): InstanceId;
|
|
178
220
|
/**
|
|
179
|
-
*
|
|
180
|
-
*
|
|
181
|
-
*
|
|
221
|
+
* 更新弹出层
|
|
222
|
+
*
|
|
223
|
+
* - 主要用于更新弹出层的渲染参数
|
|
224
|
+
* - 第一个参数需要传入需要更新的弹出层的实例 id
|
|
225
|
+
* - 第二个参数需要传入更新的参数,仅支持部分渲染参数,具体请参考{@link UpdateOption}
|
|
182
226
|
*/
|
|
183
|
-
update(instanceId: InstanceId, options:
|
|
227
|
+
update(instanceId: InstanceId, options: UpdateOption): void;
|
|
184
228
|
/**
|
|
185
229
|
* 销毁弹出层
|
|
186
|
-
*
|
|
187
|
-
*
|
|
188
|
-
*
|
|
230
|
+
*
|
|
231
|
+
* - 传入弹出层的实例 id ,用于销毁指定的弹出层
|
|
232
|
+
* - 第二个参数是自定义负载参数,会作为参数传递给创建弹出层时的 onUnmounted 回调函数
|
|
233
|
+
* - 该函数返回一个 Promise 对象,用于等待弹出层关闭动画完成
|
|
189
234
|
*/
|
|
190
235
|
destroy(instanceId: InstanceId, payload?: any): void;
|
|
191
236
|
}
|
|
@@ -193,17 +238,27 @@ declare interface IController extends PopupCustomProperties {
|
|
|
193
238
|
declare interface IDefinePlugin {
|
|
194
239
|
/**
|
|
195
240
|
* 定义插件
|
|
196
|
-
*
|
|
197
|
-
* -
|
|
241
|
+
*
|
|
242
|
+
* - 该方法用于定义一个可以直接被 `popup.use` 方法安装的插件
|
|
243
|
+
* - 插件的名称 `name` 必须唯一
|
|
244
|
+
* - 插件的安装函数 `install` 必须是一个函数,接收三个参数:
|
|
245
|
+
* - 第一个参数接收安装此插件的弹出层控制器实例
|
|
246
|
+
* - 第二个参数接收安装此插件的弹出层的创建配置
|
|
247
|
+
* - 第三个参数接收插件自定义选项,可自行定义,插件使用者可在调用
|
|
248
|
+
* `popup.use` 方法时传入
|
|
198
249
|
* - 使用示例:
|
|
250
|
+
*
|
|
199
251
|
* ```ts
|
|
200
252
|
* import { createPopup, definePlugin } from 'vue-popup-plus'
|
|
201
253
|
* const popup = createPopup()
|
|
254
|
+
*
|
|
255
|
+
* type TestPluginOption = {
|
|
256
|
+
* logEnable?: boolean
|
|
257
|
+
* }
|
|
258
|
+
*
|
|
202
259
|
* const plugin = definePlugin({
|
|
203
|
-
* // 插件名称,必须唯一
|
|
204
260
|
* name: 'test',
|
|
205
|
-
*
|
|
206
|
-
* install(popup) {
|
|
261
|
+
* install(popup, config, { logEnable = false }: TestPluginOption = {}) {
|
|
207
262
|
* popup.customProperties.test = function (message) {
|
|
208
263
|
* this.render({
|
|
209
264
|
* component: () => import('path/Demo.vue'),
|
|
@@ -211,12 +266,16 @@ declare interface IDefinePlugin {
|
|
|
211
266
|
* message,
|
|
212
267
|
* },
|
|
213
268
|
* })
|
|
269
|
+
*
|
|
270
|
+
* if (logEnable) {
|
|
271
|
+
* console.log(message)
|
|
272
|
+
* }
|
|
214
273
|
* }
|
|
215
274
|
* },
|
|
216
275
|
* })
|
|
217
276
|
* ```
|
|
218
277
|
*/
|
|
219
|
-
(options: PopupPlugin): PopupPlugin
|
|
278
|
+
<TOption extends PluginOption>(options: PopupPlugin<TOption>): PopupPlugin<TOption>;
|
|
220
279
|
}
|
|
221
280
|
|
|
222
281
|
/**
|
|
@@ -239,10 +298,12 @@ export declare class InstanceId implements IInstanceId {
|
|
|
239
298
|
|
|
240
299
|
declare interface IPluginWrappedController extends IController {
|
|
241
300
|
/**
|
|
242
|
-
*
|
|
301
|
+
* 控制器实例自定义属性原型对象
|
|
302
|
+
*
|
|
243
303
|
* - 可在插件的 `install` 方法中扩展方法或属性
|
|
244
304
|
* - 该属性为只读属性,只允许扩展,并且内置方法不能被覆盖
|
|
245
305
|
* - 使用示例:
|
|
306
|
+
*
|
|
246
307
|
* ```ts
|
|
247
308
|
* // 插件中扩展方法
|
|
248
309
|
* import { definePlugin } from 'vue-popup-plus'
|
|
@@ -267,10 +328,12 @@ declare interface IPluginWrappedController extends IController {
|
|
|
267
328
|
*/
|
|
268
329
|
readonly customProperties: ControllerPrototype;
|
|
269
330
|
/**
|
|
270
|
-
*
|
|
331
|
+
* 动画类型自定义属性原型对象
|
|
332
|
+
*
|
|
271
333
|
* - 可在插件的 `install` 方法中扩展动画类型
|
|
272
334
|
* - 该属性为只读属性,只允许扩展,并且内置动画类型不能被覆盖
|
|
273
335
|
* - 使用示例:
|
|
336
|
+
*
|
|
274
337
|
* ```ts
|
|
275
338
|
* // 插件中扩展动画类型
|
|
276
339
|
* import { definePlugin } from 'vue-popup-plus'
|
|
@@ -278,7 +341,7 @@ declare interface IPluginWrappedController extends IController {
|
|
|
278
341
|
* const plugin = definePlugin({
|
|
279
342
|
* name: 'test',
|
|
280
343
|
* install(popup) {
|
|
281
|
-
* popup.customAnimations.CUSTOM = '
|
|
344
|
+
* popup.customAnimations.CUSTOM = 'custom'
|
|
282
345
|
* },
|
|
283
346
|
* })
|
|
284
347
|
* ```
|
|
@@ -286,12 +349,16 @@ declare interface IPluginWrappedController extends IController {
|
|
|
286
349
|
readonly customAnimations: PopupCustomAnimations;
|
|
287
350
|
}
|
|
288
351
|
|
|
289
|
-
declare type PluginInstall = (controller: IPluginWrappedController, config: Readonly<CoreConfig
|
|
352
|
+
declare type PluginInstall<TOption extends PluginOption> = (controller: IPluginWrappedController, config: Readonly<CoreConfig>, option?: TOption) => void;
|
|
353
|
+
|
|
354
|
+
declare type PluginOption = Record<string, any>;
|
|
290
355
|
|
|
291
356
|
export declare const POPUP_ANIMATIONS: IAnimations;
|
|
292
357
|
|
|
293
358
|
/**
|
|
294
|
-
*
|
|
359
|
+
* 弹出层内部组件注入属性
|
|
360
|
+
*
|
|
361
|
+
* - 在弹出层内部渲染的所有子代组件中,都可以通过 inject 注入弹出层所提供的相关参数
|
|
295
362
|
*/
|
|
296
363
|
export declare const POPUP_COMPONENT_INJECTS: Readonly<ComponentInjectKeys>;
|
|
297
364
|
|
|
@@ -301,9 +368,22 @@ export declare interface PopupCustomAnimations {
|
|
|
301
368
|
export declare interface PopupCustomProperties {
|
|
302
369
|
}
|
|
303
370
|
|
|
304
|
-
export declare type PopupPlugin = {
|
|
371
|
+
export declare type PopupPlugin<TOption extends PluginOption = never> = {
|
|
372
|
+
/**
|
|
373
|
+
* 插件名称
|
|
374
|
+
*
|
|
375
|
+
* - 插件名称必须唯一
|
|
376
|
+
*/
|
|
305
377
|
name: string;
|
|
306
|
-
|
|
378
|
+
/**
|
|
379
|
+
* 插件安装函数
|
|
380
|
+
*
|
|
381
|
+
* - 第一个参数接收安装此插件的弹出层控制器实例
|
|
382
|
+
* - 第二个参数接收安装此插件的弹出层的创建配置
|
|
383
|
+
* - 第三个参数接收插件自定义选项,可自行定义,插件使用者可在调用
|
|
384
|
+
* `popup.use` 方法时传入
|
|
385
|
+
*/
|
|
386
|
+
install: PluginInstall<TOption>;
|
|
307
387
|
};
|
|
308
388
|
|
|
309
389
|
declare type PopupViewStyle = ComputedRef<{
|
|
@@ -316,18 +396,26 @@ declare type PopupViewStyle = ComputedRef<{
|
|
|
316
396
|
|
|
317
397
|
declare type RenderComponentOptions = {
|
|
318
398
|
/**
|
|
319
|
-
*
|
|
320
|
-
* @example
|
|
321
|
-
* // 同步组件
|
|
322
|
-
* import Demo from 'path/Demo.vue'
|
|
323
|
-
* popup.render({
|
|
324
|
-
* component: Demo,
|
|
325
|
-
* })
|
|
399
|
+
* 弹出层渲染的组件
|
|
326
400
|
*
|
|
401
|
+
* - 要创建一个弹出层,这是唯一必要的参数。
|
|
402
|
+
* - 支持同步组件和异步组件,为了提高加载速度,优化构建体积,建议使用异步组件。
|
|
403
|
+
* - 对于异步组件,无需使用 `defineAsyncComponent` 方法定义组件,直接传入
|
|
404
|
+
* ()=>import() 函数即可。
|
|
405
|
+
* - 使用示例:
|
|
406
|
+
*
|
|
407
|
+
* ```ts
|
|
327
408
|
* // 异步组件
|
|
328
409
|
* popup.render({
|
|
329
410
|
* component: () => import('path/Demo.vue'),
|
|
330
411
|
* })
|
|
412
|
+
*
|
|
413
|
+
* // 同步组件
|
|
414
|
+
* import Demo from 'path/Demo.vue'
|
|
415
|
+
* popup.render({
|
|
416
|
+
* component: Demo,
|
|
417
|
+
* })
|
|
418
|
+
* ```
|
|
331
419
|
*/
|
|
332
420
|
component: Component;
|
|
333
421
|
/**
|
|
@@ -346,158 +434,202 @@ declare type RenderComponentOptions = {
|
|
|
346
434
|
|
|
347
435
|
declare type RenderConfigOptions = {
|
|
348
436
|
/**
|
|
349
|
-
*
|
|
437
|
+
* 弹出层挂载的父元素
|
|
438
|
+
*
|
|
439
|
+
* - 不指定时,默认挂载到 body 元素下
|
|
350
440
|
*/
|
|
351
441
|
appendTo?: Element | string;
|
|
352
442
|
/**
|
|
353
|
-
*
|
|
443
|
+
* 弹出层是否显示遮罩层
|
|
444
|
+
*
|
|
445
|
+
* - 默认值为 true
|
|
354
446
|
*/
|
|
355
447
|
mask?: boolean;
|
|
356
448
|
/**
|
|
357
|
-
*
|
|
449
|
+
* 点击遮罩层是否关闭弹出层
|
|
450
|
+
*
|
|
451
|
+
* - 默认值为 false ,仅在 mask 为 true 时有效
|
|
358
452
|
*/
|
|
359
453
|
maskClickClose?: boolean;
|
|
360
454
|
/**
|
|
361
|
-
*
|
|
455
|
+
* 弹出层是否禁用窗口滚动
|
|
456
|
+
*
|
|
457
|
+
* - 默认值为 true
|
|
362
458
|
*/
|
|
363
459
|
disableScroll?: boolean;
|
|
364
460
|
};
|
|
365
461
|
|
|
366
|
-
export declare type
|
|
462
|
+
export declare type RenderOption = RenderConfigOptions & RenderComponentOptions & RenderStyleOptions;
|
|
367
463
|
|
|
368
464
|
declare type RenderStyleOptions = {
|
|
369
465
|
/**
|
|
370
|
-
*
|
|
466
|
+
* 弹出层宽度
|
|
467
|
+
*
|
|
468
|
+
* - 默认为 auto,即自适应,支持 string 和 number 类型,string
|
|
469
|
+
* 类型更为灵活,number 类型方便计算
|
|
470
|
+
*
|
|
371
471
|
* @example
|
|
372
|
-
*
|
|
373
|
-
*
|
|
374
|
-
*
|
|
375
|
-
*
|
|
376
|
-
*
|
|
377
|
-
*
|
|
378
|
-
*
|
|
379
|
-
*
|
|
380
|
-
*
|
|
381
|
-
*
|
|
382
|
-
*
|
|
383
|
-
*
|
|
384
|
-
*
|
|
385
|
-
*
|
|
472
|
+
* // px
|
|
473
|
+
* width: '300px',
|
|
474
|
+
* // rem
|
|
475
|
+
* width: '30rem',
|
|
476
|
+
* // vw
|
|
477
|
+
* width: '30vw',
|
|
478
|
+
* // 百分比
|
|
479
|
+
* width: '30%',
|
|
480
|
+
* // css 动态计算
|
|
481
|
+
* width: 'calc(50% + 20px)',
|
|
482
|
+
* // css 变量
|
|
483
|
+
* width: 'var(--width)',
|
|
484
|
+
* // number 类型,方便计算,单位为 px
|
|
485
|
+
* width: 300,
|
|
386
486
|
*/
|
|
387
487
|
width?: string | number;
|
|
388
488
|
/**
|
|
389
|
-
*
|
|
489
|
+
* 弹出层最大宽度
|
|
490
|
+
*
|
|
491
|
+
* - 默认为 auto,支持 string 和 number 类型,string 类型更为灵活,number
|
|
492
|
+
* 类型方便计算
|
|
493
|
+
*
|
|
390
494
|
* @example
|
|
391
|
-
*
|
|
392
|
-
*
|
|
393
|
-
*
|
|
394
|
-
*
|
|
395
|
-
*
|
|
396
|
-
*
|
|
397
|
-
*
|
|
398
|
-
*
|
|
399
|
-
*
|
|
400
|
-
*
|
|
401
|
-
*
|
|
402
|
-
*
|
|
403
|
-
*
|
|
404
|
-
*
|
|
495
|
+
* // px
|
|
496
|
+
* maxWidth: '300px',
|
|
497
|
+
* // rem
|
|
498
|
+
* maxWidth: '30rem',
|
|
499
|
+
* // vw
|
|
500
|
+
* maxWidth: '30vw',
|
|
501
|
+
* // 百分比
|
|
502
|
+
* maxWidth: '30%',
|
|
503
|
+
* // css 动态计算
|
|
504
|
+
* maxWidth: 'calc(50% + 20px)',
|
|
505
|
+
* // css 变量
|
|
506
|
+
* maxWidth: 'var(--width)',
|
|
507
|
+
* // number 类型,方便计算,单位为 px
|
|
508
|
+
* maxWidth: 300,
|
|
405
509
|
*/
|
|
406
510
|
maxWidth?: string | number;
|
|
407
511
|
/**
|
|
408
|
-
*
|
|
512
|
+
* 弹出层最小宽度
|
|
513
|
+
*
|
|
514
|
+
* - 默认为 auto,支持 string 和 number 类型,string 类型更为灵活,number
|
|
515
|
+
* 类型方便计算
|
|
516
|
+
*
|
|
409
517
|
* @example
|
|
410
|
-
*
|
|
411
|
-
*
|
|
412
|
-
*
|
|
413
|
-
*
|
|
414
|
-
*
|
|
415
|
-
*
|
|
416
|
-
*
|
|
417
|
-
*
|
|
418
|
-
*
|
|
419
|
-
*
|
|
420
|
-
*
|
|
421
|
-
*
|
|
422
|
-
*
|
|
423
|
-
*
|
|
518
|
+
* // px
|
|
519
|
+
* minWidth: '300px',
|
|
520
|
+
* // rem
|
|
521
|
+
* minWidth: '30rem',
|
|
522
|
+
* // vw
|
|
523
|
+
* minWidth: '30vw',
|
|
524
|
+
* // 百分比
|
|
525
|
+
* minWidth: '30%',
|
|
526
|
+
* // css 动态计算
|
|
527
|
+
* minWidth: 'calc(50% + 20px)',
|
|
528
|
+
* // css 变量
|
|
529
|
+
* minWidth: 'var(--width)',
|
|
530
|
+
* // number 类型,方便计算,单位为 px
|
|
531
|
+
* minWidth: 300,
|
|
424
532
|
*/
|
|
425
533
|
minWidth?: string | number;
|
|
426
534
|
/**
|
|
427
|
-
*
|
|
535
|
+
* 弹出层高度
|
|
536
|
+
*
|
|
537
|
+
* - 默认为 auto,支持 string 和 number 类型,string 类型更为灵活,number
|
|
538
|
+
* 类型方便计算
|
|
539
|
+
*
|
|
428
540
|
* @example
|
|
429
|
-
*
|
|
430
|
-
*
|
|
431
|
-
*
|
|
432
|
-
*
|
|
433
|
-
*
|
|
434
|
-
*
|
|
435
|
-
*
|
|
436
|
-
*
|
|
437
|
-
*
|
|
438
|
-
*
|
|
439
|
-
*
|
|
440
|
-
*
|
|
441
|
-
*
|
|
442
|
-
*
|
|
541
|
+
* // px
|
|
542
|
+
* height: '300px',
|
|
543
|
+
* // rem
|
|
544
|
+
* height: '30rem',
|
|
545
|
+
* // vh
|
|
546
|
+
* height: '30vh',
|
|
547
|
+
* // 百分比
|
|
548
|
+
* height: '30%',
|
|
549
|
+
* // css 动态计算
|
|
550
|
+
* height: 'calc(50% + 20px)',
|
|
551
|
+
* // css 变量
|
|
552
|
+
* height: 'var(--height)',
|
|
553
|
+
* // number 类型,方便计算,单位为 px
|
|
554
|
+
* height: 300,
|
|
443
555
|
*/
|
|
444
556
|
height?: string | number;
|
|
445
557
|
/**
|
|
446
|
-
*
|
|
558
|
+
* 弹出层最大高度
|
|
559
|
+
*
|
|
560
|
+
* - 默认为 auto,支持 string 和 number 类型,string 类型更为灵活,number
|
|
561
|
+
* 类型方便计算
|
|
562
|
+
*
|
|
447
563
|
* @example
|
|
448
|
-
*
|
|
449
|
-
*
|
|
450
|
-
*
|
|
451
|
-
*
|
|
452
|
-
*
|
|
453
|
-
*
|
|
454
|
-
*
|
|
455
|
-
*
|
|
456
|
-
*
|
|
457
|
-
*
|
|
458
|
-
*
|
|
459
|
-
*
|
|
460
|
-
*
|
|
461
|
-
*
|
|
564
|
+
* // px
|
|
565
|
+
* maxHeight: '300px',
|
|
566
|
+
* // rem
|
|
567
|
+
* maxHeight: '30rem',
|
|
568
|
+
* // vh
|
|
569
|
+
* maxHeight: '30vh',
|
|
570
|
+
* // 百分比
|
|
571
|
+
* maxHeight: '30%',
|
|
572
|
+
* // css 动态计算
|
|
573
|
+
* maxHeight: 'calc(50% + 20px)',
|
|
574
|
+
* // css 变量
|
|
575
|
+
* maxHeight: 'var(--height)',
|
|
576
|
+
* // number 类型,方便计算,单位为 px
|
|
577
|
+
* maxHeight: 300,
|
|
462
578
|
*/
|
|
463
579
|
maxHeight?: string | number;
|
|
464
580
|
/**
|
|
465
|
-
*
|
|
581
|
+
* 弹出层最小高度
|
|
582
|
+
*
|
|
583
|
+
* - 默认为 auto,支持 string 和 number 类型,string 类型更为灵活,number
|
|
584
|
+
* 类型方便计算
|
|
585
|
+
*
|
|
466
586
|
* @example
|
|
467
|
-
*
|
|
468
|
-
*
|
|
469
|
-
*
|
|
470
|
-
*
|
|
471
|
-
*
|
|
472
|
-
*
|
|
473
|
-
*
|
|
474
|
-
*
|
|
475
|
-
*
|
|
476
|
-
*
|
|
477
|
-
*
|
|
478
|
-
*
|
|
479
|
-
*
|
|
480
|
-
*
|
|
587
|
+
* // px
|
|
588
|
+
* minHeight: '300px',
|
|
589
|
+
* // rem
|
|
590
|
+
* minHeight: '30rem',
|
|
591
|
+
* // vh
|
|
592
|
+
* minHeight: '30vh',
|
|
593
|
+
* // 百分比
|
|
594
|
+
* minHeight: '30%',
|
|
595
|
+
* // css 动态计算
|
|
596
|
+
* minHeight: 'calc(50% + 20px)',
|
|
597
|
+
* // css 变量
|
|
598
|
+
* minHeight: 'var(--height)',
|
|
599
|
+
* // number 类型,方便计算,单位为 px
|
|
600
|
+
* minHeight: 300,
|
|
481
601
|
*/
|
|
482
602
|
minHeight?: string | number;
|
|
483
603
|
/**
|
|
484
|
-
*
|
|
604
|
+
* 弹出层视图动画类型
|
|
605
|
+
*
|
|
606
|
+
* - 默认为 POPUP_ANIMATIONS.FADE ,即淡入淡出,更多动画类型请查看
|
|
607
|
+
* {@link IAnimations}
|
|
485
608
|
*/
|
|
486
609
|
viewAnimation?: Animation_2;
|
|
487
610
|
/**
|
|
488
|
-
*
|
|
611
|
+
* 弹出层视图水平偏移量
|
|
612
|
+
*
|
|
613
|
+
* - 默认为 0 ,单位为 px
|
|
489
614
|
*/
|
|
490
615
|
viewTranslateX?: number;
|
|
491
616
|
/**
|
|
492
|
-
*
|
|
617
|
+
* 弹出层视图垂直偏移量
|
|
618
|
+
*
|
|
619
|
+
* - 默认为 0 ,单位为 px
|
|
493
620
|
*/
|
|
494
621
|
viewTranslateY?: number;
|
|
495
622
|
/**
|
|
496
|
-
*
|
|
623
|
+
* 弹出层视图是否允许超出窗口边界
|
|
624
|
+
*
|
|
625
|
+
* - 默认为 false
|
|
497
626
|
*/
|
|
498
627
|
viewTranslateOverflow?: boolean;
|
|
499
628
|
/**
|
|
500
|
-
*
|
|
629
|
+
* 弹出层遮罩动画类型
|
|
630
|
+
*
|
|
631
|
+
* - 默认为 POPUP_ANIMATIONS.FADE ,即淡入淡出,更多动画类型请查看
|
|
632
|
+
* {@link IAnimations}
|
|
501
633
|
*/
|
|
502
634
|
maskAnimation?: Animation_2;
|
|
503
635
|
/**
|
|
@@ -505,19 +637,24 @@ declare type RenderStyleOptions = {
|
|
|
505
637
|
*/
|
|
506
638
|
maskBlur?: boolean;
|
|
507
639
|
/**
|
|
508
|
-
*
|
|
640
|
+
* 弹出层动画时长
|
|
641
|
+
*
|
|
642
|
+
* - 默认为 100 ,单位为 毫秒
|
|
509
643
|
*/
|
|
510
644
|
animationDuration?: number;
|
|
511
645
|
/**
|
|
512
|
-
* 弹出层 zIndex
|
|
646
|
+
* 弹出层 zIndex
|
|
647
|
+
*
|
|
648
|
+
* - 若不设置,则使用全局递增的 zIndex 值
|
|
513
649
|
*/
|
|
514
650
|
zIndex?: number;
|
|
515
651
|
};
|
|
516
652
|
|
|
517
|
-
export declare type
|
|
653
|
+
export declare type UpdateOption = Partial<RenderStyleOptions>;
|
|
518
654
|
|
|
519
655
|
/**
|
|
520
656
|
* 获取弹出层控制器实例
|
|
657
|
+
*
|
|
521
658
|
* @returns 弹出层控制器实例
|
|
522
659
|
*/
|
|
523
660
|
export declare function usePopup(): IController;
|