fast-element-plus 2.0.18 → 2.0.20
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 +52 -19
- package/CONTRIBUTING.md +3 -4
- package/README.md +80 -27
- package/README.zh.md +66 -27
- package/dist/component.d.ts +123 -123
- package/dist/components/avatar/src/avatar.d.ts +26 -26
- package/dist/components/avatar/src/avatar.mjs +10 -10
- package/dist/components/avatar/src/avatar.mjs.map +1 -1
- package/dist/components/button/src/button.d.ts +32 -27
- package/dist/components/button/src/button.mjs +57 -36
- package/dist/components/button/src/button.mjs.map +1 -1
- package/dist/components/carNumber/src/carNumber.d.ts +8 -8
- package/dist/components/carNumber/src/carNumber.mjs +5 -5
- package/dist/components/carNumber/src/carNumber.mjs.map +1 -1
- package/dist/components/contextMenu/src/contextMenu.d.ts +7 -7
- package/dist/components/contextMenu/src/contextMenu.mjs +7 -7
- package/dist/components/contextMenu/src/contextMenu.mjs.map +1 -1
- package/dist/components/contextMenu/src/contextMenu.type.d.ts +7 -7
- package/dist/components/dialog/src/dialog.d.ts +76 -76
- package/dist/components/dialog/src/dialog.mjs +34 -34
- package/dist/components/dialog/src/dialog.mjs.map +1 -1
- package/dist/components/drawer/src/drawer.d.ts +59 -59
- package/dist/components/drawer/src/drawer.mjs +27 -27
- package/dist/components/drawer/src/drawer.mjs.map +1 -1
- package/dist/components/form/src/form.d.ts +30 -30
- package/dist/components/form/src/form.mjs +16 -16
- package/dist/components/form/src/form.mjs.map +1 -1
- package/dist/components/form/src/formItem.d.ts +30 -30
- package/dist/components/form/src/formItem.mjs +13 -13
- package/dist/components/form/src/formItem.mjs.map +1 -1
- package/dist/components/formItemTip/src/formItemTip.d.ts +9 -9
- package/dist/components/formItemTip/src/formItemTip.mjs +3 -3
- package/dist/components/formItemTip/src/formItemTip.mjs.map +1 -1
- package/dist/components/icon/src/icon.d.ts +10 -10
- package/dist/components/icon/src/icon.mjs +4 -4
- package/dist/components/icon/src/icon.mjs.map +1 -1
- package/dist/components/iconSelector/src/iconSelector.d.ts +6 -6
- package/dist/components/iconSelector/src/iconSelector.mjs +4 -4
- package/dist/components/iconSelector/src/iconSelector.mjs.map +1 -1
- package/dist/components/image/src/image.d.ts +36 -36
- package/dist/components/image/src/image.mjs +11 -11
- package/dist/components/image/src/image.mjs.map +1 -1
- package/dist/components/inputDialogPage/src/inputDialogPage.d.ts +37 -37
- package/dist/components/inputDialogPage/src/inputDialogPage.mjs +16 -16
- package/dist/components/inputDialogPage/src/inputDialogPage.mjs.map +1 -1
- package/dist/components/layoutGrid/src/layoutGrid.d.ts +12 -12
- package/dist/components/layoutGrid/src/layoutGrid.mjs +6 -6
- package/dist/components/layoutGrid/src/layoutGrid.mjs.map +1 -1
- package/dist/components/layoutGrid/src/layoutGridItem.d.ts +19 -19
- package/dist/components/layoutGrid/src/layoutGridItem.mjs +9 -9
- package/dist/components/layoutGrid/src/layoutGridItem.mjs.map +1 -1
- package/dist/components/select/src/select.d.ts +89 -89
- package/dist/components/select/src/select.mjs +30 -30
- package/dist/components/select/src/select.mjs.map +1 -1
- package/dist/components/select/src/selectOption.d.ts +13 -13
- package/dist/components/select/src/selectOption.mjs +6 -6
- package/dist/components/select/src/selectOption.mjs.map +1 -1
- package/dist/components/selectPage/src/selectPage.d.ts +76 -76
- package/dist/components/selectPage/src/selectPage.mjs +50 -36
- package/dist/components/selectPage/src/selectPage.mjs.map +1 -1
- package/dist/components/selectV2/index.mjs +2 -1
- package/dist/components/selectV2/index.mjs.map +1 -1
- package/dist/components/selectV2/src/selectV2.d.ts +161 -852
- package/dist/components/selectV2/src/selectV2.mjs +32 -340
- package/dist/components/selectV2/src/selectV2.mjs.map +1 -1
- package/dist/components/table/index.mjs +3 -2
- package/dist/components/table/index.mjs.map +1 -1
- package/dist/components/table/src/page.type.d.ts +1 -1
- package/dist/components/table/src/table.d.ts +211 -744
- package/dist/components/table/src/table.mjs +111 -307
- package/dist/components/table/src/table.mjs.map +1 -1
- package/dist/components/table/src/table.state.d.ts +3 -3
- package/dist/components/table/src/table.type.d.ts +1 -9
- package/dist/components/table/src/table.type.mjs.map +1 -1
- package/dist/components/table/src/tableColumn.d.ts +102 -399
- package/dist/components/table/src/tableColumn.mjs +28 -185
- package/dist/components/table/src/tableColumn.mjs.map +1 -1
- package/dist/components/table/src/tableColumnSettingDialog.d.ts +4 -4
- package/dist/components/table/src/tableColumnSettingDialog.mjs +3 -3
- package/dist/components/table/src/tableColumnSettingDialog.mjs.map +1 -1
- package/dist/components/table/src/tablePagination.d.ts +4 -4
- package/dist/components/table/src/tablePagination.mjs +3 -3
- package/dist/components/table/src/tablePagination.mjs.map +1 -1
- package/dist/components/table/src/tableSearchForm.d.ts +12 -12
- package/dist/components/table/src/tableSearchForm.mjs +6 -6
- package/dist/components/table/src/tableSearchForm.mjs.map +1 -1
- package/dist/components/table/src/tableSearchFormItem.d.ts +4 -4
- package/dist/components/table/src/tableSearchFormItem.mjs +2 -2
- package/dist/components/table/src/tableSearchFormItem.mjs.map +1 -1
- package/dist/components/table/src/useTable.d.ts +1 -0
- package/dist/components/table/src/useTable.mjs +109 -65
- package/dist/components/table/src/useTable.mjs.map +1 -1
- package/dist/components/table/utils/table.d.ts +4 -4
- package/dist/components/table/utils/table.mjs +4 -4
- package/dist/components/table/utils/table.mjs.map +1 -1
- package/dist/components/tree/src/tree.d.ts +87 -87
- package/dist/components/tree/src/tree.mjs +48 -48
- package/dist/components/tree/src/tree.mjs.map +1 -1
- package/dist/components/treeSelect/src/treeSelect.d.ts +139 -133
- package/dist/components/treeSelect/src/treeSelect.mjs +57 -57
- package/dist/components/treeSelect/src/treeSelect.mjs.map +1 -1
- package/dist/components/upload/src/upload.d.ts +36 -36
- package/dist/components/upload/src/upload.mjs +19 -19
- package/dist/components/upload/src/upload.mjs.map +1 -1
- package/dist/components/uploadImage/src/uploadImage.d.ts +47 -47
- package/dist/components/uploadImage/src/uploadImage.mjs +24 -28
- package/dist/components/uploadImage/src/uploadImage.mjs.map +1 -1
- package/dist/components/uploadImages/src/uploadImages.d.ts +41 -41
- package/dist/components/uploadImages/src/uploadImages.mjs +21 -21
- package/dist/components/uploadImages/src/uploadImages.mjs.map +1 -1
- package/dist/directives/click-debounce/index.mjs +19 -11
- package/dist/directives/click-debounce/index.mjs.map +1 -1
- package/dist/directives/click-throttle/index.d.ts +4 -2
- package/dist/directives/click-throttle/index.mjs +21 -11
- package/dist/directives/click-throttle/index.mjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.global.min.js +3 -3
- package/dist/index.global.min.js.map +1 -1
- package/dist/index.mjs +3 -3
- package/dist/internal/props.d.ts +685 -0
- package/dist/internal/props.mjs +683 -0
- package/dist/internal/props.mjs.map +1 -0
- package/dist/utils/loading-tasks.d.ts +5 -0
- package/dist/utils/loading-tasks.mjs +32 -0
- package/dist/utils/loading-tasks.mjs.map +1 -0
- package/dist/version.d.ts +1 -1
- package/dist/version.mjs +1 -1
- package/dist/version.mjs.map +1 -1
- package/package.json +5 -10
|
@@ -1,39 +1,39 @@
|
|
|
1
1
|
import type { UploadFile, UploadUserFile } from "element-plus";
|
|
2
|
-
/** FaUploadImages 的运行时 Props
|
|
2
|
+
/** FaUploadImages 的运行时 Props 定义 */
|
|
3
3
|
export declare const faUploadImagesProps: {
|
|
4
|
-
/**
|
|
4
|
+
/** accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), will not work when `thumbnail-mode === true` */
|
|
5
5
|
accept: {
|
|
6
6
|
type: StringConstructor;
|
|
7
7
|
default: () => string;
|
|
8
8
|
};
|
|
9
|
-
/**
|
|
9
|
+
/** type of file list */
|
|
10
10
|
listType: {
|
|
11
11
|
type: import("vue").PropType<NonNullable<import("element-plus").ListType | undefined>>;
|
|
12
12
|
default: string;
|
|
13
13
|
};
|
|
14
|
-
/**
|
|
14
|
+
/** whether uploading multiple files is permitted */
|
|
15
15
|
multiple: {
|
|
16
16
|
type: BooleanConstructor;
|
|
17
17
|
default: boolean;
|
|
18
18
|
validator: (value: boolean) => boolean;
|
|
19
19
|
};
|
|
20
|
-
/**
|
|
20
|
+
/** maximum number of uploads allowed */
|
|
21
21
|
limit: {
|
|
22
22
|
type: NumberConstructor;
|
|
23
23
|
default: number;
|
|
24
24
|
};
|
|
25
|
-
/**
|
|
25
|
+
/** v-model 绑定值 */
|
|
26
26
|
modelValue: import("vue").PropType<string[] | null>;
|
|
27
|
-
/**
|
|
27
|
+
/** 大小限制,单位kb */
|
|
28
28
|
maxSize: {
|
|
29
29
|
type: (NumberConstructor | StringConstructor)[];
|
|
30
30
|
default: number;
|
|
31
31
|
};
|
|
32
|
-
/**
|
|
32
|
+
/** 图片上传接口,优先级最高 */
|
|
33
33
|
uploadApi: {
|
|
34
34
|
type: import("vue").PropType<(formData: FormData) => Promise<string>>;
|
|
35
35
|
};
|
|
36
|
-
/**
|
|
36
|
+
/** 图片上传地址 */
|
|
37
37
|
uploadUrl: StringConstructor;
|
|
38
38
|
beforeUpload: import("element-plus/es/utils/vue/props/types.mjs").EpPropFinalized<(new (...args: any[]) => (rawFile: import("element-plus").UploadRawFile) => import("element-plus/es/utils/typescript.mjs").Awaitable<void | undefined | null | boolean | File | Blob>) | (() => (rawFile: import("element-plus").UploadRawFile) => import("element-plus/es/utils/typescript.mjs").Awaitable<void | undefined | null | boolean | File | Blob>) | {
|
|
39
39
|
(): (rawFile: import("element-plus").UploadRawFile) => import("element-plus/es/utils/typescript.mjs").Awaitable<void | undefined | null | boolean | File | Blob>;
|
|
@@ -146,52 +146,52 @@ export declare const faUploadImagesProps: {
|
|
|
146
146
|
disabled: import("element-plus/es/utils/vue/props/types.mjs").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
|
|
147
147
|
directory: BooleanConstructor;
|
|
148
148
|
};
|
|
149
|
-
/** FaUploadImages 的运行时 Emits
|
|
149
|
+
/** FaUploadImages 的运行时 Emits 定义 */
|
|
150
150
|
export declare const faUploadImagesEmits: {
|
|
151
|
-
/**
|
|
151
|
+
/** v-model 回调 */
|
|
152
152
|
"update:modelValue": (value: string[] | null) => boolean;
|
|
153
|
-
/**
|
|
153
|
+
/** v-model:fileList 回调 */
|
|
154
154
|
"update:fileList": (value: UploadUserFile[]) => boolean;
|
|
155
155
|
};
|
|
156
|
-
/** FaUploadImages
|
|
156
|
+
/** FaUploadImages 的插槽参数 */
|
|
157
157
|
export interface FaUploadImagesSlots extends Record<string, unknown> {
|
|
158
|
-
/**
|
|
158
|
+
/** 默认内容插槽 */
|
|
159
159
|
default: never;
|
|
160
160
|
}
|
|
161
161
|
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
162
|
-
/**
|
|
162
|
+
/** accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), will not work when `thumbnail-mode === true` */
|
|
163
163
|
accept: {
|
|
164
164
|
type: StringConstructor;
|
|
165
165
|
default: () => string;
|
|
166
166
|
};
|
|
167
|
-
/**
|
|
167
|
+
/** type of file list */
|
|
168
168
|
listType: {
|
|
169
169
|
type: import("vue").PropType<NonNullable<import("element-plus").ListType | undefined>>;
|
|
170
170
|
default: string;
|
|
171
171
|
};
|
|
172
|
-
/**
|
|
172
|
+
/** whether uploading multiple files is permitted */
|
|
173
173
|
multiple: {
|
|
174
174
|
type: BooleanConstructor;
|
|
175
175
|
default: boolean;
|
|
176
176
|
validator: (value: boolean) => boolean;
|
|
177
177
|
};
|
|
178
|
-
/**
|
|
178
|
+
/** maximum number of uploads allowed */
|
|
179
179
|
limit: {
|
|
180
180
|
type: NumberConstructor;
|
|
181
181
|
default: number;
|
|
182
182
|
};
|
|
183
|
-
/**
|
|
183
|
+
/** v-model 绑定值 */
|
|
184
184
|
modelValue: import("vue").PropType<string[] | null>;
|
|
185
|
-
/**
|
|
185
|
+
/** 大小限制,单位kb */
|
|
186
186
|
maxSize: {
|
|
187
187
|
type: (NumberConstructor | StringConstructor)[];
|
|
188
188
|
default: number;
|
|
189
189
|
};
|
|
190
|
-
/**
|
|
190
|
+
/** 图片上传接口,优先级最高 */
|
|
191
191
|
uploadApi: {
|
|
192
192
|
type: import("vue").PropType<(formData: FormData) => Promise<string>>;
|
|
193
193
|
};
|
|
194
|
-
/**
|
|
194
|
+
/** 图片上传地址 */
|
|
195
195
|
uploadUrl: StringConstructor;
|
|
196
196
|
beforeUpload: import("element-plus/es/utils/vue/props/types.mjs").EpPropFinalized<(new (...args: any[]) => (rawFile: import("element-plus").UploadRawFile) => import("element-plus/es/utils/typescript.mjs").Awaitable<void | undefined | null | boolean | File | Blob>) | (() => (rawFile: import("element-plus").UploadRawFile) => import("element-plus/es/utils/typescript.mjs").Awaitable<void | undefined | null | boolean | File | Blob>) | {
|
|
197
197
|
(): (rawFile: import("element-plus").UploadRawFile) => import("element-plus/es/utils/typescript.mjs").Awaitable<void | undefined | null | boolean | File | Blob>;
|
|
@@ -304,63 +304,63 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
304
304
|
disabled: import("element-plus/es/utils/vue/props/types.mjs").EpPropFinalized<BooleanConstructor, unknown, unknown, undefined, boolean>;
|
|
305
305
|
directory: BooleanConstructor;
|
|
306
306
|
}>, {
|
|
307
|
-
/**
|
|
307
|
+
/** 取消上传请求 */
|
|
308
308
|
abort: import("vue").ComputedRef<((file?: UploadFile) => void) | undefined>;
|
|
309
|
-
/**
|
|
309
|
+
/** 手动上传文件列表 */
|
|
310
310
|
submit: import("vue").ComputedRef<(() => void) | undefined>;
|
|
311
|
-
/**
|
|
311
|
+
/** 清空已上传的文件列表(该方法不支持在 before-upload 中调用) */
|
|
312
312
|
clearFiles: import("vue").ComputedRef<((states?: import("element-plus").UploadStatus[]) => void) | undefined>;
|
|
313
|
-
/**
|
|
313
|
+
/** 手动选择文件 */
|
|
314
314
|
handleStart: import("vue").ComputedRef<((rawFile: import("element-plus").UploadRawFile) => void) | undefined>;
|
|
315
|
-
/**
|
|
315
|
+
/** 手动移除文件。file 和 rawFile 已被合并。 */
|
|
316
316
|
handleRemove: import("vue").ComputedRef<((file: UploadFile | import("element-plus").UploadRawFile) => void) | undefined>;
|
|
317
|
-
/**
|
|
317
|
+
/** 加载状态 */
|
|
318
318
|
loading: import("vue").Ref<boolean, boolean>;
|
|
319
|
-
/**
|
|
319
|
+
/** 文件集合 */
|
|
320
320
|
fileList: import("vue").WritableComputedRef<UploadUserFile[], UploadUserFile[]>;
|
|
321
|
-
/**
|
|
321
|
+
/** 预览 */
|
|
322
322
|
preview: import("vue").ComputedRef<boolean>;
|
|
323
|
-
/**
|
|
323
|
+
/** 预览集合 */
|
|
324
324
|
previewList: import("vue").ComputedRef<string[]>;
|
|
325
325
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
326
|
-
/**
|
|
326
|
+
/** v-model 回调 */
|
|
327
327
|
"update:modelValue": (value: string[] | null) => boolean;
|
|
328
|
-
/**
|
|
328
|
+
/** v-model:fileList 回调 */
|
|
329
329
|
"update:fileList": (value: UploadUserFile[]) => boolean;
|
|
330
330
|
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
331
|
-
/**
|
|
331
|
+
/** accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), will not work when `thumbnail-mode === true` */
|
|
332
332
|
accept: {
|
|
333
333
|
type: StringConstructor;
|
|
334
334
|
default: () => string;
|
|
335
335
|
};
|
|
336
|
-
/**
|
|
336
|
+
/** type of file list */
|
|
337
337
|
listType: {
|
|
338
338
|
type: import("vue").PropType<NonNullable<import("element-plus").ListType | undefined>>;
|
|
339
339
|
default: string;
|
|
340
340
|
};
|
|
341
|
-
/**
|
|
341
|
+
/** whether uploading multiple files is permitted */
|
|
342
342
|
multiple: {
|
|
343
343
|
type: BooleanConstructor;
|
|
344
344
|
default: boolean;
|
|
345
345
|
validator: (value: boolean) => boolean;
|
|
346
346
|
};
|
|
347
|
-
/**
|
|
347
|
+
/** maximum number of uploads allowed */
|
|
348
348
|
limit: {
|
|
349
349
|
type: NumberConstructor;
|
|
350
350
|
default: number;
|
|
351
351
|
};
|
|
352
|
-
/**
|
|
352
|
+
/** v-model 绑定值 */
|
|
353
353
|
modelValue: import("vue").PropType<string[] | null>;
|
|
354
|
-
/**
|
|
354
|
+
/** 大小限制,单位kb */
|
|
355
355
|
maxSize: {
|
|
356
356
|
type: (NumberConstructor | StringConstructor)[];
|
|
357
357
|
default: number;
|
|
358
358
|
};
|
|
359
|
-
/**
|
|
359
|
+
/** 图片上传接口,优先级最高 */
|
|
360
360
|
uploadApi: {
|
|
361
361
|
type: import("vue").PropType<(formData: FormData) => Promise<string>>;
|
|
362
362
|
};
|
|
363
|
-
/**
|
|
363
|
+
/** 图片上传地址 */
|
|
364
364
|
uploadUrl: StringConstructor;
|
|
365
365
|
beforeUpload: import("element-plus/es/utils/vue/props/types.mjs").EpPropFinalized<(new (...args: any[]) => (rawFile: import("element-plus").UploadRawFile) => import("element-plus/es/utils/typescript.mjs").Awaitable<void | undefined | null | boolean | File | Blob>) | (() => (rawFile: import("element-plus").UploadRawFile) => import("element-plus/es/utils/typescript.mjs").Awaitable<void | undefined | null | boolean | File | Blob>) | {
|
|
366
366
|
(): (rawFile: import("element-plus").UploadRawFile) => import("element-plus/es/utils/typescript.mjs").Awaitable<void | undefined | null | boolean | File | Blob>;
|
|
@@ -10,20 +10,20 @@ import { Fragment, computed, createTextVNode, createVNode, defineComponent, merg
|
|
|
10
10
|
import { Delete, Edit, Plus, ZoomIn } from "@element-plus/icons-vue";
|
|
11
11
|
import { ElIcon, ElImageViewer, ElUpload, uploadProps } from "element-plus";
|
|
12
12
|
//#region src/components/uploadImages/src/uploadImages.tsx
|
|
13
|
-
/** FaUploadImages 的运行时 Props
|
|
13
|
+
/** FaUploadImages 的运行时 Props 定义 */
|
|
14
14
|
const faUploadImagesProps = {
|
|
15
15
|
...uploadProps,
|
|
16
|
-
/**
|
|
16
|
+
/** accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), will not work when `thumbnail-mode === true` */
|
|
17
17
|
accept: {
|
|
18
18
|
type: String,
|
|
19
19
|
default: () => FaMimeType.Image
|
|
20
20
|
},
|
|
21
|
-
/**
|
|
21
|
+
/** type of file list */
|
|
22
22
|
listType: {
|
|
23
23
|
type: definePropType(String),
|
|
24
24
|
default: "picture-card"
|
|
25
25
|
},
|
|
26
|
-
/**
|
|
26
|
+
/** whether uploading multiple files is permitted */
|
|
27
27
|
multiple: {
|
|
28
28
|
type: Boolean,
|
|
29
29
|
default: true,
|
|
@@ -35,28 +35,28 @@ const faUploadImagesProps = {
|
|
|
35
35
|
return true;
|
|
36
36
|
}
|
|
37
37
|
},
|
|
38
|
-
/**
|
|
38
|
+
/** maximum number of uploads allowed */
|
|
39
39
|
limit: {
|
|
40
40
|
type: Number,
|
|
41
41
|
default: 9
|
|
42
42
|
},
|
|
43
|
-
/**
|
|
43
|
+
/** v-model 绑定值 */
|
|
44
44
|
modelValue: definePropType([Array]),
|
|
45
|
-
/**
|
|
45
|
+
/** 大小限制,单位kb */
|
|
46
46
|
maxSize: {
|
|
47
47
|
type: [String, Number],
|
|
48
48
|
default: 2048
|
|
49
49
|
},
|
|
50
|
-
/**
|
|
50
|
+
/** 图片上传接口,优先级最高 */
|
|
51
51
|
uploadApi: { type: definePropType(Function) },
|
|
52
|
-
/**
|
|
52
|
+
/** 图片上传地址 */
|
|
53
53
|
uploadUrl: String
|
|
54
54
|
};
|
|
55
|
-
/** FaUploadImages 的运行时 Emits
|
|
55
|
+
/** FaUploadImages 的运行时 Emits 定义 */
|
|
56
56
|
const faUploadImagesEmits = {
|
|
57
|
-
/**
|
|
57
|
+
/** v-model 回调 */
|
|
58
58
|
"update:modelValue": (value) => Array.isArray(value) || value === null,
|
|
59
|
-
/**
|
|
59
|
+
/** v-model:fileList 回调 */
|
|
60
60
|
"update:fileList": (value) => Array.isArray(value)
|
|
61
61
|
};
|
|
62
62
|
var uploadImages_default = defineComponent({
|
|
@@ -165,23 +165,23 @@ var uploadImages_default = defineComponent({
|
|
|
165
165
|
"urlList": state.previewList
|
|
166
166
|
}, null)]));
|
|
167
167
|
return useExpose(expose, {
|
|
168
|
-
/**
|
|
168
|
+
/** 取消上传请求 */
|
|
169
169
|
abort: computed(() => uploadRef.value?.abort),
|
|
170
|
-
/**
|
|
170
|
+
/** 手动上传文件列表 */
|
|
171
171
|
submit: computed(() => uploadRef.value?.submit),
|
|
172
|
-
/**
|
|
172
|
+
/** 清空已上传的文件列表(该方法不支持在 before-upload 中调用) */
|
|
173
173
|
clearFiles: computed(() => uploadRef.value?.clearFiles),
|
|
174
|
-
/**
|
|
174
|
+
/** 手动选择文件 */
|
|
175
175
|
handleStart: computed(() => uploadRef.value?.handleStart),
|
|
176
|
-
/**
|
|
176
|
+
/** 手动移除文件。file 和 rawFile 已被合并。 */
|
|
177
177
|
handleRemove: computed(() => uploadRef.value?.handleRemove),
|
|
178
|
-
/**
|
|
178
|
+
/** 加载状态 */
|
|
179
179
|
loading,
|
|
180
|
-
/**
|
|
180
|
+
/** 文件集合 */
|
|
181
181
|
fileList,
|
|
182
|
-
/**
|
|
182
|
+
/** 预览 */
|
|
183
183
|
preview: computed(() => state.preview),
|
|
184
|
-
/**
|
|
184
|
+
/** 预览集合 */
|
|
185
185
|
previewList: computed(() => state.previewList)
|
|
186
186
|
});
|
|
187
187
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"uploadImages.mjs","names":["update:modelValue","update:fileList"],"sources":["../../../../src/components/uploadImages/src/uploadImages.tsx"],"sourcesContent":["import { Fragment, computed, defineComponent, reactive, shallowRef } from \"vue\";\nimport { Delete, Edit, Plus, ZoomIn } from \"@element-plus/icons-vue\";\nimport { ElIcon, ElImageViewer, ElUpload, uploadProps } from \"element-plus\";\nimport { FaMimeType } from \"../../../constants\";\nimport { definePropType, makeSlots, randomString, useExpose, useProps, useRender, withDefineType } from \"../../../utils\";\nimport { useUpload } from \"../../upload/src/useUpload\";\nimport type { UploadFile, UploadInstance, UploadProps, UploadUserFile } from \"element-plus\";\n\n/** FaUploadImages 的运行时 Props 定义。 */\nexport const faUploadImagesProps = {\n\t// eslint-disable-next-line @typescript-eslint/no-deprecated -- Element Plus 2.x 尚未提供可替代的公开运行时 props 定义。\n\t...uploadProps,\n\t/** @description accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), will not work when `thumbnail-mode === true` */\n\taccept: {\n\t\ttype: String,\n\t\tdefault: () => FaMimeType.Image,\n\t},\n\t/** @description type of file list */\n\tlistType: {\n\t\ttype: definePropType<NonNullable<UploadProps[\"listType\"]>>(String),\n\t\tdefault: \"picture-card\",\n\t},\n\t/** @description whether uploading multiple files is permitted */\n\tmultiple: {\n\t\ttype: Boolean,\n\t\tdefault: true,\n\t\tvalidator: (value: boolean) => {\n\t\t\tif (!value) {\n\t\t\t\tconsole.warn(\"[Fast:FaUploadImages]\", \"'multiple' 属性固定为 true,外部设置不会生效。\");\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\treturn true;\n\t\t},\n\t},\n\t/** @description maximum number of uploads allowed */\n\tlimit: {\n\t\ttype: Number,\n\t\tdefault: 9,\n\t},\n\t/** @description v-model绑定值 */\n\tmodelValue: definePropType<string[] | null>([Array]),\n\t/** @description 大小限制,单位kb */\n\tmaxSize: {\n\t\ttype: [String, Number],\n\t\tdefault: 2048,\n\t},\n\t/** @description 图片上传接口,优先级最高 */\n\tuploadApi: {\n\t\ttype: definePropType<(formData: FormData) => Promise<string>>(Function),\n\t},\n\t/** @description 图片上传地址 */\n\tuploadUrl: String,\n};\n\n/** FaUploadImages 的运行时 Emits 定义。 */\nexport const faUploadImagesEmits = {\n\t/** @description v-model 回调 */\n\t\"update:modelValue\": (value: string[] | null) => Array.isArray(value) || value === null,\n\t/** @description v-model:fileList 回调 */\n\t\"update:fileList\": (value: UploadUserFile[]) => Array.isArray(value),\n};\n\n/** FaUploadImages 的插槽参数。 */\nexport interface FaUploadImagesSlots extends Record<string, unknown> {\n\t/** @description 默认内容插槽 */\n\tdefault: never;\n}\n\nexport default defineComponent({\n\tname: \"FaUploadImages\",\n\tprops: faUploadImagesProps,\n\temits: faUploadImagesEmits,\n\tslots: makeSlots<FaUploadImagesSlots>(),\n\tsetup(props, { slots, emit, expose }) {\n\t\tconst {\n\t\t\tfileList,\n\t\t\tloading,\n\t\t\tformContext,\n\t\t\tmaxSizeMB,\n\t\t\thandleHttpRequest,\n\t\t\thandleOnSuccess,\n\t\t\thandleOnError,\n\t\t\thandleOnRemove,\n\t\t\thandleOnExceed,\n\t\t\thandleOnUpload,\n\t\t\thandleOnChange,\n\t\t} = useUpload<string[]>(\"FaUploadImages\", \"图片\", props, emit, {\n\t\t\tget maxSize() {\n\t\t\t\treturn props.maxSize;\n\t\t\t},\n\t\t\tget uploadApi() {\n\t\t\t\treturn props.uploadApi;\n\t\t\t},\n\t\t\tget uploadUrl() {\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated -- 需要与 Element Plus 2.x 的运行时默认 action 比较。\n\t\t\t\treturn props.uploadUrl || (props.action === uploadProps.action.default ? undefined : props.action);\n\t\t\t},\n\t\t});\n\n\t\tconst uploadRef = shallowRef<UploadInstance | null>(null);\n\n\t\tconst state = reactive({\n\t\t\tuploadKey: `fa-upload-images__${randomString(8)}`,\n\t\t\tpreview: false,\n\t\t\tpreviewIndex: -1,\n\t\t\tpreviewList: withDefineType<string[]>([]),\n\t\t});\n\n\t\tconst disabled = computed(() => {\n\t\t\treturn props.disabled === true || formContext?.disabled === true;\n\t\t});\n\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated -- 需要识别 Element Plus 2.x 注入的默认请求实现。\n\t\tconst httpRequest = computed(() => (props.httpRequest === uploadProps.httpRequest.default ? handleHttpRequest : props.httpRequest));\n\n\t\tconst handleEdit = () => {\n\t\t\tconst uploadInputEl = document.querySelector(`.${state.uploadKey} .el-upload__input`);\n\t\t\tuploadInputEl?.dispatchEvent(new MouseEvent(\"click\"));\n\t\t};\n\n\t\tconst handlePreview = (uploadFile: UploadFile) => {\n\t\t\tstate.previewIndex = fileList.value.findIndex((f) => f.url === uploadFile.url);\n\t\t\tstate.previewList = fileList.value.flatMap((item) => (item.url ? [item.url] : []));\n\t\t\tstate.preview = true;\n\t\t};\n\n\t\tconst handleRemove = (index: number) => {\n\t\t\tconst file = fileList.value[index];\n\t\t\tif (file) uploadRef.value?.handleRemove(file as UploadFile);\n\t\t};\n\n\t\tconst handleBeforeUpload: UploadProps[\"beforeUpload\"] = (rawFile) => {\n\t\t\tif (!handleOnUpload(rawFile)) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\treturn props.beforeUpload(rawFile);\n\t\t};\n\n\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated -- 透传范围必须与继承的 Element Plus 2.x 运行时 props 保持一致。\n\t\tconst elUploadProps = useProps(props, uploadProps, [\n\t\t\t\"fileList\",\n\t\t\t\"multiple\",\n\t\t\t\"disabled\",\n\t\t\t\"httpRequest\",\n\t\t\t\"beforeUpload\",\n\t\t\t\"onExceed\",\n\t\t\t\"onSuccess\",\n\t\t\t\"onError\",\n\t\t\t\"onRemove\",\n\t\t\t\"onChange\",\n\t\t]);\n\n\t\tuseRender(() => (\n\t\t\t<Fragment>\n\t\t\t\t<ElUpload\n\t\t\t\t\t{...elUploadProps.value}\n\t\t\t\t\tref={uploadRef}\n\t\t\t\t\tclass={[\"fa-upload-images\", state.uploadKey, { \"fa-upload-images__hidden-upload\": fileList.value.length >= props.limit }]}\n\t\t\t\t\tvLoading={loading.value}\n\t\t\t\t\tvModel:fileList={fileList.value}\n\t\t\t\t\tmultiple={true}\n\t\t\t\t\tdisabled={disabled.value}\n\t\t\t\t\thttpRequest={httpRequest.value}\n\t\t\t\t\tbeforeUpload={handleBeforeUpload}\n\t\t\t\t\tonExceed={handleOnExceed}\n\t\t\t\t\tonSuccess={handleOnSuccess}\n\t\t\t\t\tonError={handleOnError}\n\t\t\t\t\tonRemove={handleOnRemove}\n\t\t\t\t\tonChange={handleOnChange}\n\t\t\t\t>\n\t\t\t\t\t{{\n\t\t\t\t\t\tdefault: () =>\n\t\t\t\t\t\t\tfileList.value.length < props.limit && slots.default ? (\n\t\t\t\t\t\t\t\tslots.default()\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<ElIcon>\n\t\t\t\t\t\t\t\t\t<Plus />\n\t\t\t\t\t\t\t\t</ElIcon>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\ttip: () => <div class=\"el-upload__tip\">files with a size less than {maxSizeMB.value.toString()}MB</div>,\n\t\t\t\t\t\tfile: ({ file, index }: { file: UploadFile; index: number }) => (\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<img class=\"el-upload-list__item-thumbnail\" src={file.url} />\n\t\t\t\t\t\t\t\t<span class=\"el-upload-list__item-actions\">\n\t\t\t\t\t\t\t\t\t<span class=\"el-upload-list__item-preview\" onClick={() => handlePreview(file)} title=\"查看\">\n\t\t\t\t\t\t\t\t\t\t<ElIcon>\n\t\t\t\t\t\t\t\t\t\t\t<ZoomIn />\n\t\t\t\t\t\t\t\t\t\t</ElIcon>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{!disabled.value && (\n\t\t\t\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"el-upload-list__item-icon\" onClick={handleEdit} title=\"编辑\">\n\t\t\t\t\t\t\t\t\t\t\t\t<ElIcon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Edit />\n\t\t\t\t\t\t\t\t\t\t\t\t</ElIcon>\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"el-upload-list__item-icon\" onClick={() => handleRemove(index)} title=\"删除\">\n\t\t\t\t\t\t\t\t\t\t\t\t<ElIcon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Delete />\n\t\t\t\t\t\t\t\t\t\t\t\t</ElIcon>\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t),\n\t\t\t\t\t}}\n\t\t\t\t</ElUpload>\n\t\t\t\t{state.preview && (\n\t\t\t\t\t<ElImageViewer\n\t\t\t\t\t\tcloseOnPressEscape\n\t\t\t\t\t\thideOnClickModal\n\t\t\t\t\t\tteleported\n\t\t\t\t\t\tinitialIndex={Math.max(state.previewIndex, 0)}\n\t\t\t\t\t\tonClose={() => (state.preview = false)}\n\t\t\t\t\t\turlList={state.previewList}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Fragment>\n\t\t));\n\n\t\treturn useExpose(expose, {\n\t\t\t/** @description 取消上传请求 */\n\t\t\tabort: computed(() => uploadRef.value?.abort),\n\t\t\t/** @description 手动上传文件列表 */\n\t\t\tsubmit: computed(() => uploadRef.value?.submit),\n\t\t\t/** @description 清空已上传的文件列表(该方法不支持在 before-upload 中调用) */\n\t\t\tclearFiles: computed(() => uploadRef.value?.clearFiles),\n\t\t\t/** @description 手动选择文件 */\n\t\t\thandleStart: computed(() => uploadRef.value?.handleStart),\n\t\t\t/** @description 手动移除文件。file 和 rawFile 已被合并。 */\n\t\t\thandleRemove: computed(() => uploadRef.value?.handleRemove),\n\t\t\t/** @description 加载状态 */\n\t\t\tloading,\n\t\t\t/** @description 文件集合 */\n\t\t\tfileList,\n\t\t\t/** @description 预览 */\n\t\t\tpreview: computed(() => state.preview),\n\t\t\t/** @description 预览集合 */\n\t\t\tpreviewList: computed(() => state.previewList),\n\t\t});\n\t},\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"uploadImages.mjs","names":["update:modelValue","update:fileList"],"sources":["../../../../src/components/uploadImages/src/uploadImages.tsx"],"sourcesContent":["import { Fragment, computed, defineComponent, reactive, shallowRef } from \"vue\";\nimport { Delete, Edit, Plus, ZoomIn } from \"@element-plus/icons-vue\";\nimport { ElIcon, ElImageViewer, ElUpload, uploadProps } from \"element-plus\";\nimport { FaMimeType } from \"../../../constants\";\nimport { definePropType, makeSlots, randomString, useExpose, useProps, useRender, withDefineType } from \"../../../utils\";\nimport { useUpload } from \"../../upload/src/useUpload\";\nimport type { UploadFile, UploadInstance, UploadProps, UploadUserFile } from \"element-plus\";\n\n/** FaUploadImages 的运行时 Props 定义 */\nexport const faUploadImagesProps = {\n\t// eslint-disable-next-line @typescript-eslint/no-deprecated -- Element Plus 2.x 尚未提供可替代的公开运行时 props 定义。\n\t...uploadProps,\n\t/** accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept), will not work when `thumbnail-mode === true` */\n\taccept: {\n\t\ttype: String,\n\t\tdefault: () => FaMimeType.Image,\n\t},\n\t/** type of file list */\n\tlistType: {\n\t\ttype: definePropType<NonNullable<UploadProps[\"listType\"]>>(String),\n\t\tdefault: \"picture-card\",\n\t},\n\t/** whether uploading multiple files is permitted */\n\tmultiple: {\n\t\ttype: Boolean,\n\t\tdefault: true,\n\t\tvalidator: (value: boolean) => {\n\t\t\tif (!value) {\n\t\t\t\tconsole.warn(\"[Fast:FaUploadImages]\", \"'multiple' 属性固定为 true,外部设置不会生效。\");\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\treturn true;\n\t\t},\n\t},\n\t/** maximum number of uploads allowed */\n\tlimit: {\n\t\ttype: Number,\n\t\tdefault: 9,\n\t},\n\t/** v-model 绑定值 */\n\tmodelValue: definePropType<string[] | null>([Array]),\n\t/** 大小限制,单位kb */\n\tmaxSize: {\n\t\ttype: [String, Number],\n\t\tdefault: 2048,\n\t},\n\t/** 图片上传接口,优先级最高 */\n\tuploadApi: {\n\t\ttype: definePropType<(formData: FormData) => Promise<string>>(Function),\n\t},\n\t/** 图片上传地址 */\n\tuploadUrl: String,\n};\n\n/** FaUploadImages 的运行时 Emits 定义 */\nexport const faUploadImagesEmits = {\n\t/** v-model 回调 */\n\t\"update:modelValue\": (value: string[] | null) => Array.isArray(value) || value === null,\n\t/** v-model:fileList 回调 */\n\t\"update:fileList\": (value: UploadUserFile[]) => Array.isArray(value),\n};\n\n/** FaUploadImages 的插槽参数 */\nexport interface FaUploadImagesSlots extends Record<string, unknown> {\n\t/** 默认内容插槽 */\n\tdefault: never;\n}\n\nexport default defineComponent({\n\tname: \"FaUploadImages\",\n\tprops: faUploadImagesProps,\n\temits: faUploadImagesEmits,\n\tslots: makeSlots<FaUploadImagesSlots>(),\n\tsetup(props, { slots, emit, expose }) {\n\t\tconst {\n\t\t\tfileList,\n\t\t\tloading,\n\t\t\tformContext,\n\t\t\tmaxSizeMB,\n\t\t\thandleHttpRequest,\n\t\t\thandleOnSuccess,\n\t\t\thandleOnError,\n\t\t\thandleOnRemove,\n\t\t\thandleOnExceed,\n\t\t\thandleOnUpload,\n\t\t\thandleOnChange,\n\t\t} = useUpload<string[]>(\"FaUploadImages\", \"图片\", props, emit, {\n\t\t\tget maxSize() {\n\t\t\t\treturn props.maxSize;\n\t\t\t},\n\t\t\tget uploadApi() {\n\t\t\t\treturn props.uploadApi;\n\t\t\t},\n\t\t\tget uploadUrl() {\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated -- 需要与 Element Plus 2.x 的运行时默认 action 比较。\n\t\t\t\treturn props.uploadUrl || (props.action === uploadProps.action.default ? undefined : props.action);\n\t\t\t},\n\t\t});\n\n\t\tconst uploadRef = shallowRef<UploadInstance | null>(null);\n\n\t\tconst state = reactive({\n\t\t\tuploadKey: `fa-upload-images__${randomString(8)}`,\n\t\t\tpreview: false,\n\t\t\tpreviewIndex: -1,\n\t\t\tpreviewList: withDefineType<string[]>([]),\n\t\t});\n\n\t\tconst disabled = computed(() => {\n\t\t\treturn props.disabled === true || formContext?.disabled === true;\n\t\t});\n\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated -- 需要识别 Element Plus 2.x 注入的默认请求实现。\n\t\tconst httpRequest = computed(() => (props.httpRequest === uploadProps.httpRequest.default ? handleHttpRequest : props.httpRequest));\n\n\t\tconst handleEdit = () => {\n\t\t\tconst uploadInputEl = document.querySelector(`.${state.uploadKey} .el-upload__input`);\n\t\t\tuploadInputEl?.dispatchEvent(new MouseEvent(\"click\"));\n\t\t};\n\n\t\tconst handlePreview = (uploadFile: UploadFile) => {\n\t\t\tstate.previewIndex = fileList.value.findIndex((f) => f.url === uploadFile.url);\n\t\t\tstate.previewList = fileList.value.flatMap((item) => (item.url ? [item.url] : []));\n\t\t\tstate.preview = true;\n\t\t};\n\n\t\tconst handleRemove = (index: number) => {\n\t\t\tconst file = fileList.value[index];\n\t\t\tif (file) uploadRef.value?.handleRemove(file as UploadFile);\n\t\t};\n\n\t\tconst handleBeforeUpload: UploadProps[\"beforeUpload\"] = (rawFile) => {\n\t\t\tif (!handleOnUpload(rawFile)) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\treturn props.beforeUpload(rawFile);\n\t\t};\n\n\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated -- 透传范围必须与继承的 Element Plus 2.x 运行时 props 保持一致。\n\t\tconst elUploadProps = useProps(props, uploadProps, [\n\t\t\t\"fileList\",\n\t\t\t\"multiple\",\n\t\t\t\"disabled\",\n\t\t\t\"httpRequest\",\n\t\t\t\"beforeUpload\",\n\t\t\t\"onExceed\",\n\t\t\t\"onSuccess\",\n\t\t\t\"onError\",\n\t\t\t\"onRemove\",\n\t\t\t\"onChange\",\n\t\t]);\n\n\t\tuseRender(() => (\n\t\t\t<Fragment>\n\t\t\t\t<ElUpload\n\t\t\t\t\t{...elUploadProps.value}\n\t\t\t\t\tref={uploadRef}\n\t\t\t\t\tclass={[\"fa-upload-images\", state.uploadKey, { \"fa-upload-images__hidden-upload\": fileList.value.length >= props.limit }]}\n\t\t\t\t\tvLoading={loading.value}\n\t\t\t\t\tvModel:fileList={fileList.value}\n\t\t\t\t\tmultiple={true}\n\t\t\t\t\tdisabled={disabled.value}\n\t\t\t\t\thttpRequest={httpRequest.value}\n\t\t\t\t\tbeforeUpload={handleBeforeUpload}\n\t\t\t\t\tonExceed={handleOnExceed}\n\t\t\t\t\tonSuccess={handleOnSuccess}\n\t\t\t\t\tonError={handleOnError}\n\t\t\t\t\tonRemove={handleOnRemove}\n\t\t\t\t\tonChange={handleOnChange}\n\t\t\t\t>\n\t\t\t\t\t{{\n\t\t\t\t\t\tdefault: () =>\n\t\t\t\t\t\t\tfileList.value.length < props.limit && slots.default ? (\n\t\t\t\t\t\t\t\tslots.default()\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<ElIcon>\n\t\t\t\t\t\t\t\t\t<Plus />\n\t\t\t\t\t\t\t\t</ElIcon>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\ttip: () => <div class=\"el-upload__tip\">files with a size less than {maxSizeMB.value.toString()}MB</div>,\n\t\t\t\t\t\tfile: ({ file, index }: { file: UploadFile; index: number }) => (\n\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t<img class=\"el-upload-list__item-thumbnail\" src={file.url} />\n\t\t\t\t\t\t\t\t<span class=\"el-upload-list__item-actions\">\n\t\t\t\t\t\t\t\t\t<span class=\"el-upload-list__item-preview\" onClick={() => handlePreview(file)} title=\"查看\">\n\t\t\t\t\t\t\t\t\t\t<ElIcon>\n\t\t\t\t\t\t\t\t\t\t\t<ZoomIn />\n\t\t\t\t\t\t\t\t\t\t</ElIcon>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{!disabled.value && (\n\t\t\t\t\t\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"el-upload-list__item-icon\" onClick={handleEdit} title=\"编辑\">\n\t\t\t\t\t\t\t\t\t\t\t\t<ElIcon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Edit />\n\t\t\t\t\t\t\t\t\t\t\t\t</ElIcon>\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"el-upload-list__item-icon\" onClick={() => handleRemove(index)} title=\"删除\">\n\t\t\t\t\t\t\t\t\t\t\t\t<ElIcon>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Delete />\n\t\t\t\t\t\t\t\t\t\t\t\t</ElIcon>\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t),\n\t\t\t\t\t}}\n\t\t\t\t</ElUpload>\n\t\t\t\t{state.preview && (\n\t\t\t\t\t<ElImageViewer\n\t\t\t\t\t\tcloseOnPressEscape\n\t\t\t\t\t\thideOnClickModal\n\t\t\t\t\t\tteleported\n\t\t\t\t\t\tinitialIndex={Math.max(state.previewIndex, 0)}\n\t\t\t\t\t\tonClose={() => (state.preview = false)}\n\t\t\t\t\t\turlList={state.previewList}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Fragment>\n\t\t));\n\n\t\treturn useExpose(expose, {\n\t\t\t/** 取消上传请求 */\n\t\t\tabort: computed(() => uploadRef.value?.abort),\n\t\t\t/** 手动上传文件列表 */\n\t\t\tsubmit: computed(() => uploadRef.value?.submit),\n\t\t\t/** 清空已上传的文件列表(该方法不支持在 before-upload 中调用) */\n\t\t\tclearFiles: computed(() => uploadRef.value?.clearFiles),\n\t\t\t/** 手动选择文件 */\n\t\t\thandleStart: computed(() => uploadRef.value?.handleStart),\n\t\t\t/** 手动移除文件。file 和 rawFile 已被合并。 */\n\t\t\thandleRemove: computed(() => uploadRef.value?.handleRemove),\n\t\t\t/** 加载状态 */\n\t\t\tloading,\n\t\t\t/** 文件集合 */\n\t\t\tfileList,\n\t\t\t/** 预览 */\n\t\t\tpreview: computed(() => state.preview),\n\t\t\t/** 预览集合 */\n\t\t\tpreviewList: computed(() => state.previewList),\n\t\t});\n\t},\n});\n"],"mappings":"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"}
|
|
@@ -1,16 +1,24 @@
|
|
|
1
1
|
import { withInstallDirective } from "../../utils/vue/install.mjs";
|
|
2
2
|
/** 对点击回调进行防抖处理的 Vue 指令。 */
|
|
3
|
-
const vDebounce = withInstallDirective({
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
el.
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}
|
|
3
|
+
const vDebounce = withInstallDirective({
|
|
4
|
+
created(el, _binding, vNode) {
|
|
5
|
+
const props = vNode.props;
|
|
6
|
+
if (props?.onClick === void 0) return;
|
|
7
|
+
el.__debounce_originClick__ = props.onClick;
|
|
8
|
+
props.onClick = (...arguments_) => {
|
|
9
|
+
if (el.__debounce_timer__) clearTimeout(el.__debounce_timer__);
|
|
10
|
+
el.__debounce_timer__ = setTimeout(() => {
|
|
11
|
+
el.__debounce_timer__ = void 0;
|
|
12
|
+
el.__debounce_originClick__?.(...arguments_);
|
|
13
|
+
}, 500);
|
|
14
|
+
};
|
|
15
|
+
},
|
|
16
|
+
beforeUnmount(el) {
|
|
17
|
+
if (el.__debounce_timer__ !== void 0) clearTimeout(el.__debounce_timer__);
|
|
18
|
+
delete el.__debounce_timer__;
|
|
19
|
+
delete el.__debounce_originClick__;
|
|
20
|
+
}
|
|
21
|
+
}, "debounce");
|
|
14
22
|
//#endregion
|
|
15
23
|
export { vDebounce as default, vDebounce };
|
|
16
24
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/directives/click-debounce/index.ts"],"sourcesContent":["/**\n * v-debounce\n * 按钮防抖指令\n */\nimport { withInstallDirective } from \"../../utils\";\nimport type { Directive } from \"vue\";\n\ninterface DebounceElement extends HTMLElement {\n\t__debounce_timer__?: ReturnType<typeof setTimeout>;\n\t__debounce_originClick__?: (...arguments_: unknown[]) => unknown;\n}\n\nconst DebounceDirective: Directive<DebounceElement> = {\n\tcreated(el, _binding, vNode) {\n\t\tconst props = vNode.props as { onClick?: (...arguments_: unknown[]) => unknown } | null;\n\t\tif (props?.onClick === undefined) return;\n\n\t\t// 记录原来的点击事件方法\n\t\tel.__debounce_originClick__ = props.onClick;\n\n\t\t// 替换原来的点击事件\n\t\tprops.onClick = (...arguments_: unknown[]): void => {\n\t\t\tif (el.__debounce_timer__) {\n\t\t\t\tclearTimeout(el.__debounce_timer__);\n\t\t\t}\n\t\t\t// 防抖处理\n\t\t\tel.__debounce_timer__ = setTimeout(() => {\n\t\t\t\tel.__debounce_originClick__?.(...arguments_);\n\t\t\t}, 500);\n\t\t};\n\t},\n};\n\n/** 对点击回调进行防抖处理的 Vue 指令。 */\nexport const vDebounce = withInstallDirective(DebounceDirective, \"debounce\");\nexport default vDebounce;\n"],"mappings":";;
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/directives/click-debounce/index.ts"],"sourcesContent":["/**\n * v-debounce\n * 按钮防抖指令\n */\nimport { withInstallDirective } from \"../../utils/vue/install\";\nimport type { Directive } from \"vue\";\n\ninterface DebounceElement extends HTMLElement {\n\t__debounce_timer__?: ReturnType<typeof setTimeout>;\n\t__debounce_originClick__?: (...arguments_: unknown[]) => unknown;\n}\n\nconst DebounceDirective: Directive<DebounceElement> = {\n\tcreated(el, _binding, vNode) {\n\t\tconst props = vNode.props as { onClick?: (...arguments_: unknown[]) => unknown } | null;\n\t\tif (props?.onClick === undefined) return;\n\n\t\t// 记录原来的点击事件方法\n\t\tel.__debounce_originClick__ = props.onClick;\n\n\t\t// 替换原来的点击事件\n\t\tprops.onClick = (...arguments_: unknown[]): void => {\n\t\t\tif (el.__debounce_timer__) {\n\t\t\t\tclearTimeout(el.__debounce_timer__);\n\t\t\t}\n\t\t\t// 防抖处理\n\t\t\tel.__debounce_timer__ = setTimeout(() => {\n\t\t\t\tel.__debounce_timer__ = undefined;\n\t\t\t\tel.__debounce_originClick__?.(...arguments_);\n\t\t\t}, 500);\n\t\t};\n\t},\n\tbeforeUnmount(el) {\n\t\t// 卸载后不再触发延迟业务回调,同时释放闭包引用。\n\t\tif (el.__debounce_timer__ !== undefined) clearTimeout(el.__debounce_timer__);\n\t\tdelete el.__debounce_timer__;\n\t\tdelete el.__debounce_originClick__;\n\t},\n};\n\n/** 对点击回调进行防抖处理的 Vue 指令。 */\nexport const vDebounce = withInstallDirective(DebounceDirective, \"debounce\");\nexport default vDebounce;\n"],"mappings":";;AAyCA,MAAa,YAAY,qBAAqB;CA5B7C,QAAQ,IAAI,UAAU,OAAO;EAC5B,MAAM,QAAQ,MAAM;EACpB,IAAI,OAAO,YAAY,KAAA,GAAW;EAGlC,GAAG,2BAA2B,MAAM;EAGpC,MAAM,WAAW,GAAG,eAAgC;GACnD,IAAI,GAAG,oBACN,aAAa,GAAG,kBAAkB;GAGnC,GAAG,qBAAqB,iBAAiB;IACxC,GAAG,qBAAqB,KAAA;IACxB,GAAG,2BAA2B,GAAG,UAAU;GAC5C,GAAG,GAAG;EACP;CACD;CACA,cAAc,IAAI;EAEjB,IAAI,GAAG,uBAAuB,KAAA,GAAW,aAAa,GAAG,kBAAkB;EAC3E,OAAO,GAAG;EACV,OAAO,GAAG;CACX;AAI6C,GAAmB,UAAU"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
interface ThrottleElement extends HTMLElement {
|
|
2
|
-
__handleClick__
|
|
2
|
+
__handleClick__?: () => void;
|
|
3
|
+
__throttle_timer__?: ReturnType<typeof setTimeout>;
|
|
4
|
+
__throttle_callback__?: (...arguments_: unknown[]) => void;
|
|
3
5
|
disabled: boolean;
|
|
4
6
|
}
|
|
5
|
-
/**
|
|
7
|
+
/** 对点击回调进行前缘节流;冷却期为 1 秒,卸载时清理监听与计时器。 */
|
|
6
8
|
export declare const vThrottle: import("../../utils").Installable<import("vue").ObjectDirective<ThrottleElement, (...arguments_: unknown[]) => void, string, string>>;
|
|
7
9
|
export default vThrottle;
|
|
@@ -1,23 +1,33 @@
|
|
|
1
1
|
import { withInstallDirective } from "../../utils/vue/install.mjs";
|
|
2
|
-
/**
|
|
2
|
+
/** 对点击回调进行前缘节流;冷却期为 1 秒,卸载时清理监听与计时器。 */
|
|
3
3
|
const vThrottle = withInstallDirective({
|
|
4
4
|
mounted(el, binding) {
|
|
5
5
|
if (typeof binding.value !== "function") throw new TypeError("callback 必须是函数。");
|
|
6
|
-
|
|
6
|
+
el.__throttle_callback__ = binding.value;
|
|
7
7
|
el.__handleClick__ = () => {
|
|
8
|
-
if (
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
8
|
+
if (el.__throttle_timer__ !== void 0 || el.disabled) return;
|
|
9
|
+
el.disabled = true;
|
|
10
|
+
el.__throttle_timer__ = setTimeout(() => {
|
|
11
|
+
el.__throttle_timer__ = void 0;
|
|
12
|
+
el.disabled = false;
|
|
13
|
+
}, 1e3);
|
|
14
|
+
el.__throttle_callback__?.();
|
|
16
15
|
};
|
|
17
16
|
el.addEventListener("click", el.__handleClick__);
|
|
18
17
|
},
|
|
18
|
+
updated(el, binding) {
|
|
19
|
+
if (typeof binding.value !== "function") throw new TypeError("callback 必须是函数。");
|
|
20
|
+
el.__throttle_callback__ = binding.value;
|
|
21
|
+
},
|
|
19
22
|
beforeUnmount(el) {
|
|
20
|
-
el.removeEventListener("click", el.__handleClick__);
|
|
23
|
+
if (el.__handleClick__) el.removeEventListener("click", el.__handleClick__);
|
|
24
|
+
if (el.__throttle_timer__ !== void 0) {
|
|
25
|
+
clearTimeout(el.__throttle_timer__);
|
|
26
|
+
el.disabled = false;
|
|
27
|
+
}
|
|
28
|
+
delete el.__handleClick__;
|
|
29
|
+
delete el.__throttle_timer__;
|
|
30
|
+
delete el.__throttle_callback__;
|
|
21
31
|
}
|
|
22
32
|
}, "throttle");
|
|
23
33
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/directives/click-throttle/index.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/directives/click-throttle/index.ts"],"sourcesContent":["import { withInstallDirective } from \"../../utils/vue/install\";\nimport type { Directive } from \"vue\";\n\ninterface ThrottleElement extends HTMLElement {\n\t__handleClick__?: () => void;\n\t__throttle_timer__?: ReturnType<typeof setTimeout>;\n\t__throttle_callback__?: (...arguments_: unknown[]) => void;\n\tdisabled: boolean;\n}\n\nconst ThrottleDirective: Directive<ThrottleElement, (...arguments_: unknown[]) => void> = {\n\tmounted(el, binding) {\n\t\tif (typeof binding.value !== \"function\") {\n\t\t\tthrow new TypeError(\"callback 必须是函数。\");\n\t\t}\n\t\tel.__throttle_callback__ = binding.value;\n\t\tel.__handleClick__ = (): void => {\n\t\t\t// 冷却期内的额外事件不能清除解锁计时器,否则元素会一直禁用。\n\t\t\tif (el.__throttle_timer__ !== undefined || el.disabled) return;\n\t\t\tel.disabled = true;\n\t\t\t// 在调用业务回调前登记计时器;回调抛错或同步触发卸载时也能正确清理。\n\t\t\tel.__throttle_timer__ = setTimeout(() => {\n\t\t\t\tel.__throttle_timer__ = undefined;\n\t\t\t\tel.disabled = false;\n\t\t\t}, 1000);\n\t\t\tel.__throttle_callback__?.();\n\t\t};\n\t\tel.addEventListener(\"click\", el.__handleClick__);\n\t},\n\tupdated(el, binding) {\n\t\tif (typeof binding.value !== \"function\") {\n\t\t\tthrow new TypeError(\"callback 必须是函数。\");\n\t\t}\n\t\tel.__throttle_callback__ = binding.value;\n\t},\n\tbeforeUnmount(el) {\n\t\tif (el.__handleClick__) el.removeEventListener(\"click\", el.__handleClick__);\n\t\tif (el.__throttle_timer__ !== undefined) {\n\t\t\tclearTimeout(el.__throttle_timer__);\n\t\t\tel.disabled = false;\n\t\t}\n\t\tdelete el.__handleClick__;\n\t\tdelete el.__throttle_timer__;\n\t\tdelete el.__throttle_callback__;\n\t},\n};\n\n/** 对点击回调进行前缘节流;冷却期为 1 秒,卸载时清理监听与计时器。 */\nexport const vThrottle = withInstallDirective(ThrottleDirective, \"throttle\");\nexport default vThrottle;\n"],"mappings":";;AAgDA,MAAa,YAAY,qBAAqB;CArC7C,QAAQ,IAAI,SAAS;EACpB,IAAI,OAAO,QAAQ,UAAU,YAC5B,MAAM,IAAI,UAAU,iBAAiB;EAEtC,GAAG,wBAAwB,QAAQ;EACnC,GAAG,wBAA8B;GAEhC,IAAI,GAAG,uBAAuB,KAAA,KAAa,GAAG,UAAU;GACxD,GAAG,WAAW;GAEd,GAAG,qBAAqB,iBAAiB;IACxC,GAAG,qBAAqB,KAAA;IACxB,GAAG,WAAW;GACf,GAAG,GAAI;GACP,GAAG,wBAAwB;EAC5B;EACA,GAAG,iBAAiB,SAAS,GAAG,eAAe;CAChD;CACA,QAAQ,IAAI,SAAS;EACpB,IAAI,OAAO,QAAQ,UAAU,YAC5B,MAAM,IAAI,UAAU,iBAAiB;EAEtC,GAAG,wBAAwB,QAAQ;CACpC;CACA,cAAc,IAAI;EACjB,IAAI,GAAG,iBAAiB,GAAG,oBAAoB,SAAS,GAAG,eAAe;EAC1E,IAAI,GAAG,uBAAuB,KAAA,GAAW;GACxC,aAAa,GAAG,kBAAkB;GAClC,GAAG,WAAW;EACf;EACA,OAAO,GAAG;EACV,OAAO,GAAG;EACV,OAAO,GAAG;CACX;AAI6C,GAAmB,UAAU"}
|