ll-plus 2.4.18 → 2.4.19
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/es/component.mjs +4 -0
- package/es/component.mjs.map +1 -1
- package/es/components/breadcrumb-card/index.d.ts +12 -21
- package/es/components/breadcrumb-card/src/breadcrumb-card.d.ts +2 -7
- package/es/components/breadcrumb-card/src/breadcrumb-card.vue.d.ts +12 -21
- package/es/components/drawer/src/components/second-confirmation/index.d.ts +2 -2
- package/es/components/drawer/src/components/second-confirmation/src/second-confirmation.vue.d.ts +2 -2
- package/es/components/index.d.ts +2 -0
- package/es/components/new-drawer/index.d.ts +732 -0
- package/es/components/new-drawer/src/drawer.d.ts +60 -0
- package/es/components/new-drawer/src/drawer.vue.d.ts +725 -0
- package/es/components/new-modal/index.d.ts +2340 -0
- package/es/components/new-modal/src/modal.d.ts +58 -0
- package/es/components/new-modal/src/modal.vue.d.ts +2333 -0
- package/es/components/table/index.d.ts +1 -0
- package/es/components/table/src/components/header-search.vue.d.ts +1 -0
- package/es/components/table/src/table.vue.d.ts +1 -0
- package/es/index.mjs +4 -0
- package/es/index.mjs.map +1 -1
- package/es/packages/components/breadcrumb-card/src/breadcrumb-card.mjs +6 -5
- package/es/packages/components/breadcrumb-card/src/breadcrumb-card.mjs.map +1 -1
- package/es/packages/components/breadcrumb-card/src/breadcrumb-card.vue2.mjs +30 -38
- package/es/packages/components/breadcrumb-card/src/breadcrumb-card.vue2.mjs.map +1 -1
- package/es/packages/components/index.mjs +4 -0
- package/es/packages/components/index.mjs.map +1 -1
- package/es/packages/components/new-drawer/index.mjs +10 -0
- package/es/packages/components/new-drawer/index.mjs.map +1 -0
- package/es/packages/components/new-drawer/src/drawer.mjs +106 -0
- package/es/packages/components/new-drawer/src/drawer.mjs.map +1 -0
- package/es/packages/components/new-drawer/src/drawer.vue.mjs +8 -0
- package/es/packages/components/new-drawer/src/drawer.vue.mjs.map +1 -0
- package/es/packages/components/new-drawer/src/drawer.vue2.mjs +162 -0
- package/es/packages/components/new-drawer/src/drawer.vue2.mjs.map +1 -0
- package/es/packages/components/new-modal/index.mjs +10 -0
- package/es/packages/components/new-modal/index.mjs.map +1 -0
- package/es/packages/components/new-modal/src/modal.mjs +104 -0
- package/es/packages/components/new-modal/src/modal.mjs.map +1 -0
- package/es/packages/components/new-modal/src/modal.vue.mjs +8 -0
- package/es/packages/components/new-modal/src/modal.vue.mjs.map +1 -0
- package/es/packages/components/new-modal/src/modal.vue2.mjs +126 -0
- package/es/packages/components/new-modal/src/modal.vue2.mjs.map +1 -0
- package/es/packages/components/table/src/components/header-search.vue2.mjs +21 -13
- package/es/packages/components/table/src/components/header-search.vue2.mjs.map +1 -1
- package/es/packages/hooks/use-scroll/index.mjs +72 -3
- package/es/packages/hooks/use-scroll/index.mjs.map +1 -1
- package/index.full.js +720 -173
- package/index.full.min.js +22 -22
- package/index.full.min.js.map +1 -1
- package/index.full.min.mjs +23 -23
- package/index.full.min.mjs.map +1 -1
- package/index.full.mjs +717 -177
- package/lib/component.js +86 -82
- package/lib/component.js.map +1 -1
- package/lib/components/breadcrumb-card/index.d.ts +12 -21
- package/lib/components/breadcrumb-card/src/breadcrumb-card.d.ts +2 -7
- package/lib/components/breadcrumb-card/src/breadcrumb-card.vue.d.ts +12 -21
- package/lib/components/drawer/src/components/second-confirmation/index.d.ts +2 -2
- package/lib/components/drawer/src/components/second-confirmation/src/second-confirmation.vue.d.ts +2 -2
- package/lib/components/index.d.ts +2 -0
- package/lib/components/new-drawer/index.d.ts +732 -0
- package/lib/components/new-drawer/src/drawer.d.ts +60 -0
- package/lib/components/new-drawer/src/drawer.vue.d.ts +725 -0
- package/lib/components/new-modal/index.d.ts +2340 -0
- package/lib/components/new-modal/src/modal.d.ts +58 -0
- package/lib/components/new-modal/src/modal.vue.d.ts +2333 -0
- package/lib/components/table/index.d.ts +1 -0
- package/lib/components/table/src/components/header-search.vue.d.ts +1 -0
- package/lib/components/table/src/table.vue.d.ts +1 -0
- package/lib/index.js +97 -86
- package/lib/index.js.map +1 -1
- package/lib/packages/components/breadcrumb-card/src/breadcrumb-card.js +6 -5
- package/lib/packages/components/breadcrumb-card/src/breadcrumb-card.js.map +1 -1
- package/lib/packages/components/breadcrumb-card/src/breadcrumb-card.vue2.js +29 -37
- package/lib/packages/components/breadcrumb-card/src/breadcrumb-card.vue2.js.map +1 -1
- package/lib/packages/components/index.js +93 -82
- package/lib/packages/components/index.js.map +1 -1
- package/lib/packages/components/new-drawer/index.js +17 -0
- package/lib/packages/components/new-drawer/index.js.map +1 -0
- package/lib/packages/components/new-drawer/src/drawer.js +109 -0
- package/lib/packages/components/new-drawer/src/drawer.js.map +1 -0
- package/lib/packages/components/new-drawer/src/drawer.vue.js +12 -0
- package/lib/packages/components/new-drawer/src/drawer.vue.js.map +1 -0
- package/lib/packages/components/new-drawer/src/drawer.vue2.js +166 -0
- package/lib/packages/components/new-drawer/src/drawer.vue2.js.map +1 -0
- package/lib/packages/components/new-modal/index.js +18 -0
- package/lib/packages/components/new-modal/index.js.map +1 -0
- package/lib/packages/components/new-modal/src/modal.js +108 -0
- package/lib/packages/components/new-modal/src/modal.js.map +1 -0
- package/lib/packages/components/new-modal/src/modal.vue.js +12 -0
- package/lib/packages/components/new-modal/src/modal.vue.js.map +1 -0
- package/lib/packages/components/new-modal/src/modal.vue2.js +130 -0
- package/lib/packages/components/new-modal/src/modal.vue2.js.map +1 -0
- package/lib/packages/components/table/src/components/header-search.vue2.js +20 -12
- package/lib/packages/components/table/src/components/header-search.vue2.js.map +1 -1
- package/lib/packages/hooks/use-scroll/index.js +72 -3
- package/lib/packages/hooks/use-scroll/index.js.map +1 -1
- package/package.json +1 -1
- package/theme-chalk/css/breadcrumb-card.css +1 -1
- package/theme-chalk/css/index.css +2 -2
- package/theme-chalk/css/new-drawer.css +5 -0
- package/theme-chalk/css/new-modal.css +5 -0
- package/types/packages/components/breadcrumb-card/index.d.ts +12 -21
- package/types/packages/components/breadcrumb-card/src/breadcrumb-card.d.ts +2 -7
- package/types/packages/components/breadcrumb-card/src/breadcrumb-card.vue.d.ts +12 -21
- package/types/packages/components/drawer/src/components/second-confirmation/index.d.ts +2 -2
- package/types/packages/components/drawer/src/components/second-confirmation/src/second-confirmation.vue.d.ts +2 -2
- package/types/packages/components/index.d.ts +2 -0
- package/types/packages/components/new-drawer/index.d.ts +732 -0
- package/types/packages/components/new-drawer/src/drawer.d.ts +60 -0
- package/types/packages/components/new-drawer/src/drawer.vue.d.ts +725 -0
- package/types/packages/components/new-modal/index.d.ts +2340 -0
- package/types/packages/components/new-modal/src/modal.d.ts +58 -0
- package/types/packages/components/new-modal/src/modal.vue.d.ts +2333 -0
- package/types/packages/components/table/index.d.ts +1 -0
- package/types/packages/components/table/src/components/header-search.vue.d.ts +1 -0
- package/types/packages/components/table/src/table.vue.d.ts +1 -0
|
@@ -0,0 +1,104 @@
|
|
|
1
|
+
import '../../../utils/index.mjs';
|
|
2
|
+
import { buildProps, definePropType } from '../../../utils/props/runtime.mjs';
|
|
3
|
+
|
|
4
|
+
"use strict";
|
|
5
|
+
const modalType = ["confirm", "operate"];
|
|
6
|
+
const newModalProps = buildProps({
|
|
7
|
+
/**
|
|
8
|
+
* @description 弹窗是否可见
|
|
9
|
+
*/
|
|
10
|
+
open: {
|
|
11
|
+
type: Boolean,
|
|
12
|
+
default: false
|
|
13
|
+
},
|
|
14
|
+
/**
|
|
15
|
+
* @description 标题
|
|
16
|
+
*/
|
|
17
|
+
title: {
|
|
18
|
+
type: String,
|
|
19
|
+
default: "\u63D0\u793A"
|
|
20
|
+
},
|
|
21
|
+
/**
|
|
22
|
+
* @description 确认/知道了按钮loading
|
|
23
|
+
*/
|
|
24
|
+
confirmLoading: {
|
|
25
|
+
type: Boolean,
|
|
26
|
+
default: false
|
|
27
|
+
},
|
|
28
|
+
/**
|
|
29
|
+
* @description 取消按钮的配置信息
|
|
30
|
+
*/
|
|
31
|
+
cancelButtonProps: {
|
|
32
|
+
type: definePropType(Object)
|
|
33
|
+
},
|
|
34
|
+
/**
|
|
35
|
+
* @description 确认按钮的配置信息
|
|
36
|
+
*/
|
|
37
|
+
okButtonProps: {
|
|
38
|
+
type: definePropType(Object)
|
|
39
|
+
},
|
|
40
|
+
/**
|
|
41
|
+
* @description 弹窗类型 确认/操作框
|
|
42
|
+
*/
|
|
43
|
+
type: {
|
|
44
|
+
type: String,
|
|
45
|
+
values: modalType,
|
|
46
|
+
default: "operate"
|
|
47
|
+
},
|
|
48
|
+
/**
|
|
49
|
+
* @description 弹窗外层容器的类名
|
|
50
|
+
*/
|
|
51
|
+
wrapClassName: {
|
|
52
|
+
type: String,
|
|
53
|
+
default: ""
|
|
54
|
+
},
|
|
55
|
+
/**
|
|
56
|
+
* @description 容器内容的顶部的阴影 设置为false标记可能是外部其他元素滚动
|
|
57
|
+
*/
|
|
58
|
+
isShowTopShadow: {
|
|
59
|
+
type: Boolean,
|
|
60
|
+
default: true
|
|
61
|
+
},
|
|
62
|
+
/**
|
|
63
|
+
* @description 容器内容底部的阴影
|
|
64
|
+
*/
|
|
65
|
+
isShowFooterShadow: {
|
|
66
|
+
type: Boolean,
|
|
67
|
+
default: true
|
|
68
|
+
},
|
|
69
|
+
/**
|
|
70
|
+
* @description 确认按钮文字
|
|
71
|
+
*/
|
|
72
|
+
confirmText: {
|
|
73
|
+
type: String,
|
|
74
|
+
default: ""
|
|
75
|
+
},
|
|
76
|
+
/**
|
|
77
|
+
* @description 取消按钮文字
|
|
78
|
+
*/
|
|
79
|
+
cancelText: {
|
|
80
|
+
type: String,
|
|
81
|
+
default: "\u53D6\u6D88"
|
|
82
|
+
},
|
|
83
|
+
/**
|
|
84
|
+
* @description 显示底部
|
|
85
|
+
*/
|
|
86
|
+
showFooter: {
|
|
87
|
+
type: Boolean,
|
|
88
|
+
default: true
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
const newModalEmits = {
|
|
92
|
+
/**
|
|
93
|
+
* @description 点击取消时触发
|
|
94
|
+
*/
|
|
95
|
+
cancel: () => true,
|
|
96
|
+
/**
|
|
97
|
+
* @description 点击确认时触发
|
|
98
|
+
*/
|
|
99
|
+
ok: () => true,
|
|
100
|
+
"update:open": () => true
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
export { modalType, newModalEmits, newModalProps };
|
|
104
|
+
//# sourceMappingURL=modal.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal.mjs","sources":["../../../../../../packages/components/new-modal/src/modal.ts"],"sourcesContent":["import { buildProps, definePropType } from '@ll-plus/utils'\n\nimport type { ExtractPropTypes } from 'vue'\nimport type Modal from './modal.vue'\nimport type { ButtonProps } from '@ll-plus/components'\n\n// modal的类型 确认框和操作框\nexport const modalType = ['confirm', 'operate'] as const\n\nexport const newModalProps = buildProps({\n /**\n * @description 弹窗是否可见\n */\n open: {\n type: Boolean,\n default: false\n },\n /**\n * @description 标题\n */\n title: {\n type: String,\n default: '提示'\n },\n /**\n * @description 确认/知道了按钮loading\n */\n confirmLoading: {\n type: Boolean,\n default: false\n },\n /**\n * @description 取消按钮的配置信息\n */\n cancelButtonProps: {\n type: definePropType<ButtonProps>(Object)\n },\n /**\n * @description 确认按钮的配置信息\n */\n okButtonProps: {\n type: definePropType<ButtonProps>(Object)\n },\n /**\n * @description 弹窗类型 确认/操作框\n */\n type: {\n type: String,\n values: modalType,\n default: 'operate'\n },\n /**\n * @description 弹窗外层容器的类名\n */\n wrapClassName: {\n type: String,\n default: ''\n },\n /**\n * @description 容器内容的顶部的阴影 设置为false标记可能是外部其他元素滚动\n */\n isShowTopShadow: {\n type: Boolean,\n default: true\n },\n /**\n * @description 容器内容底部的阴影\n */\n isShowFooterShadow: {\n type: Boolean,\n default: true\n },\n /**\n * @description 确认按钮文字\n */\n confirmText: {\n type: String,\n default: ''\n },\n /**\n * @description 取消按钮文字\n */\n cancelText: {\n type: String,\n default: '取消'\n },\n /**\n * @description 显示底部\n */\n showFooter: {\n type: Boolean,\n default: true\n }\n} as const)\n\nexport const newModalEmits = {\n /**\n * @description 点击取消时触发\n */\n cancel: () => true,\n /**\n * @description 点击确认时触发\n */\n ok: () => true,\n 'update:open': () => true\n} as const\n\n// props\nexport type NewModalProps = ExtractPropTypes<typeof newModalProps>\n\n// emits\nexport type NewModalEmits = typeof newModalEmits\nexport type ModalType = NewModalProps['type']\n\n// instance\nexport type NewModalInstance = InstanceType<typeof Modal>\n"],"names":[],"mappings":";;;;AAOa,MAAA,SAAA,GAAY,CAAC,SAAA,EAAW,SAAS,EAAA;AAEvC,MAAM,gBAAgB,UAAW,CAAA;AAAA;AAAA;AAAA;AAAA,EAItC,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA,OAAA;AAAA,IACN,OAAS,EAAA,KAAA;AAAA,GACX;AAAA;AAAA;AAAA;AAAA,EAIA,KAAO,EAAA;AAAA,IACL,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,cAAA;AAAA,GACX;AAAA;AAAA;AAAA;AAAA,EAIA,cAAgB,EAAA;AAAA,IACd,IAAM,EAAA,OAAA;AAAA,IACN,OAAS,EAAA,KAAA;AAAA,GACX;AAAA;AAAA;AAAA;AAAA,EAIA,iBAAmB,EAAA;AAAA,IACjB,IAAA,EAAM,eAA4B,MAAM,CAAA;AAAA,GAC1C;AAAA;AAAA;AAAA;AAAA,EAIA,aAAe,EAAA;AAAA,IACb,IAAA,EAAM,eAA4B,MAAM,CAAA;AAAA,GAC1C;AAAA;AAAA;AAAA;AAAA,EAIA,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA,MAAA;AAAA,IACN,MAAQ,EAAA,SAAA;AAAA,IACR,OAAS,EAAA,SAAA;AAAA,GACX;AAAA;AAAA;AAAA;AAAA,EAIA,aAAe,EAAA;AAAA,IACb,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,EAAA;AAAA,GACX;AAAA;AAAA;AAAA;AAAA,EAIA,eAAiB,EAAA;AAAA,IACf,IAAM,EAAA,OAAA;AAAA,IACN,OAAS,EAAA,IAAA;AAAA,GACX;AAAA;AAAA;AAAA;AAAA,EAIA,kBAAoB,EAAA;AAAA,IAClB,IAAM,EAAA,OAAA;AAAA,IACN,OAAS,EAAA,IAAA;AAAA,GACX;AAAA;AAAA;AAAA;AAAA,EAIA,WAAa,EAAA;AAAA,IACX,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,EAAA;AAAA,GACX;AAAA;AAAA;AAAA;AAAA,EAIA,UAAY,EAAA;AAAA,IACV,IAAM,EAAA,MAAA;AAAA,IACN,OAAS,EAAA,cAAA;AAAA,GACX;AAAA;AAAA;AAAA;AAAA,EAIA,UAAY,EAAA;AAAA,IACV,IAAM,EAAA,OAAA;AAAA,IACN,OAAS,EAAA,IAAA;AAAA,GACX;AACF,CAAU,EAAA;AAEH,MAAM,aAAgB,GAAA;AAAA;AAAA;AAAA;AAAA,EAI3B,QAAQ,MAAM,IAAA;AAAA;AAAA;AAAA;AAAA,EAId,IAAI,MAAM,IAAA;AAAA,EACV,eAAe,MAAM,IAAA;AACvB;;;;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import _sfc_main from './modal.vue2.mjs';
|
|
2
|
+
import _export_sfc from '../../../../_virtual/_plugin-vue_export-helper.mjs';
|
|
3
|
+
|
|
4
|
+
"use strict";
|
|
5
|
+
var Modal = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "modal.vue"]]);
|
|
6
|
+
|
|
7
|
+
export { Modal as default };
|
|
8
|
+
//# sourceMappingURL=modal.vue.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal.vue.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import { defineComponent, useAttrs, ref, computed, openBlock, createBlock, unref, mergeProps, createSlots, withCtx, createElementVNode, normalizeClass, createCommentVNode, withDirectives, vShow, renderSlot, createVNode } from 'vue';
|
|
2
|
+
import { Modal } from 'ant-design-vue';
|
|
3
|
+
import '../../index.mjs';
|
|
4
|
+
import '../../../utils/index.mjs';
|
|
5
|
+
import { omit } from 'lodash-es';
|
|
6
|
+
import { newModalProps, newModalEmits } from './modal.mjs';
|
|
7
|
+
import '../../../hooks/index.mjs';
|
|
8
|
+
import { useScroll } from '../../../hooks/use-scroll/index.mjs';
|
|
9
|
+
import { createNamespace } from '../../../utils/create-namespace.mjs';
|
|
10
|
+
import { LlButton } from '../../button/index.mjs';
|
|
11
|
+
|
|
12
|
+
"use strict";
|
|
13
|
+
var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
14
|
+
...{ name: "LlNewModal" },
|
|
15
|
+
__name: "modal",
|
|
16
|
+
props: newModalProps,
|
|
17
|
+
emits: newModalEmits,
|
|
18
|
+
setup(__props, { emit: __emit }) {
|
|
19
|
+
const props = __props;
|
|
20
|
+
const emits = __emit;
|
|
21
|
+
const attrs = useAttrs();
|
|
22
|
+
const { scrollPosition, isHasScrollBar, scrollRef } = useScroll();
|
|
23
|
+
const modal = ref();
|
|
24
|
+
const getBindValue = computed(() => {
|
|
25
|
+
const result = {
|
|
26
|
+
...omit({ ...attrs }, [...Object.keys(newModalProps), "wrapClassName"])
|
|
27
|
+
};
|
|
28
|
+
if (!props.showFooter)
|
|
29
|
+
result.footer = null;
|
|
30
|
+
return result;
|
|
31
|
+
});
|
|
32
|
+
const isShowContentTopBox = computed(() => {
|
|
33
|
+
return props.isShowTopShadow && scrollPosition.value && isHasScrollBar.value && scrollPosition.value !== "top";
|
|
34
|
+
});
|
|
35
|
+
const isShowContentBottomBox = computed(() => {
|
|
36
|
+
if (props.isShowTopShadow) {
|
|
37
|
+
return isHasScrollBar.value && scrollPosition.value !== "bottom";
|
|
38
|
+
} else {
|
|
39
|
+
return props.isShowFooterShadow;
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
const bem = createNamespace("new-modal");
|
|
43
|
+
const handleCancel = () => {
|
|
44
|
+
emits("cancel");
|
|
45
|
+
emits("update:open");
|
|
46
|
+
};
|
|
47
|
+
const handleOk = () => {
|
|
48
|
+
emits("ok");
|
|
49
|
+
};
|
|
50
|
+
return (_ctx, _cache) => {
|
|
51
|
+
return openBlock(), createBlock(unref(Modal), mergeProps(getBindValue.value, {
|
|
52
|
+
ref_key: "modal",
|
|
53
|
+
ref: modal,
|
|
54
|
+
open: _ctx.open,
|
|
55
|
+
title: _ctx.title,
|
|
56
|
+
"wrap-class-name": `${unref(bem).b()} ${_ctx.wrapClassName}`,
|
|
57
|
+
class: [unref(bem).is(_ctx.type === "confirm" ? "confirm-modal" : "")],
|
|
58
|
+
onCancel: handleCancel,
|
|
59
|
+
onOk: handleOk
|
|
60
|
+
}), createSlots({
|
|
61
|
+
default: withCtx(() => [
|
|
62
|
+
createElementVNode(
|
|
63
|
+
"div",
|
|
64
|
+
{
|
|
65
|
+
ref_key: "scrollRef",
|
|
66
|
+
ref: scrollRef,
|
|
67
|
+
class: normalizeClass([unref(bem).e("container")])
|
|
68
|
+
},
|
|
69
|
+
[
|
|
70
|
+
createCommentVNode(" \u5185\u5BB9\u533A\u57DF\u9876\u90E8\u7684\u76D2\u5B50\u7528\u4E8E\u6EDA\u52A8\u906E\u76D6/\u9634\u5F71 \u53EA\u6709\u6EDA\u52A8\u72B6\u6001\u4E0B\u624D\u6709\uFF0C\u6EDA\u52A8\u5230\u9876\u90E8\u9700\u8981 "),
|
|
71
|
+
withDirectives(createElementVNode(
|
|
72
|
+
"div",
|
|
73
|
+
{
|
|
74
|
+
class: normalizeClass(unref(bem).e("content-top-shadow"))
|
|
75
|
+
},
|
|
76
|
+
null,
|
|
77
|
+
2
|
|
78
|
+
/* CLASS */
|
|
79
|
+
), [
|
|
80
|
+
[vShow, isShowContentTopBox.value]
|
|
81
|
+
]),
|
|
82
|
+
renderSlot(_ctx.$slots, "default")
|
|
83
|
+
],
|
|
84
|
+
2
|
|
85
|
+
/* CLASS */
|
|
86
|
+
)
|
|
87
|
+
]),
|
|
88
|
+
_: 2
|
|
89
|
+
/* DYNAMIC */
|
|
90
|
+
}, [
|
|
91
|
+
_ctx.showFooter ? {
|
|
92
|
+
name: "footer",
|
|
93
|
+
fn: withCtx(() => [
|
|
94
|
+
createElementVNode(
|
|
95
|
+
"div",
|
|
96
|
+
{
|
|
97
|
+
class: normalizeClass(`${unref(bem).e("footer")} ${isShowContentBottomBox.value ? unref(bem).e("footer-shadow") : ""}`)
|
|
98
|
+
},
|
|
99
|
+
[
|
|
100
|
+
renderSlot(_ctx.$slots, "footer", {}, () => [
|
|
101
|
+
_ctx.type !== "confirm" ? (openBlock(), createBlock(unref(LlButton), mergeProps({
|
|
102
|
+
key: 0,
|
|
103
|
+
label: _ctx.cancelText,
|
|
104
|
+
size: "middle"
|
|
105
|
+
}, _ctx.cancelButtonProps, { onClick: handleCancel }), null, 16, ["label"])) : createCommentVNode("v-if", true),
|
|
106
|
+
createVNode(unref(LlButton), mergeProps({
|
|
107
|
+
type: "primary",
|
|
108
|
+
loading: props.confirmLoading,
|
|
109
|
+
size: "middle",
|
|
110
|
+
label: props.confirmText ? props.confirmText : props.type === "confirm" ? "\u77E5\u9053\u4E86" : "\u786E\u8BA4"
|
|
111
|
+
}, _ctx.okButtonProps, { onClick: handleOk }), null, 16, ["loading", "label"])
|
|
112
|
+
])
|
|
113
|
+
],
|
|
114
|
+
2
|
|
115
|
+
/* CLASS */
|
|
116
|
+
)
|
|
117
|
+
]),
|
|
118
|
+
key: "0"
|
|
119
|
+
} : void 0
|
|
120
|
+
]), 1040, ["open", "title", "wrap-class-name", "class"]);
|
|
121
|
+
};
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
|
|
125
|
+
export { _sfc_main as default };
|
|
126
|
+
//# sourceMappingURL=modal.vue2.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"modal.vue2.mjs","sources":["../../../../../../packages/components/new-modal/src/modal.vue"],"sourcesContent":["<template>\n <Modal\n v-bind=\"getBindValue\"\n ref=\"modal\"\n :open=\"open\"\n :title=\"title\"\n :wrap-class-name=\"`${bem.b()} ${wrapClassName}`\"\n :class=\"[bem.is(type === 'confirm' ? 'confirm-modal' : '')]\"\n @cancel=\"handleCancel\"\n @ok=\"handleOk\"\n >\n <!-- 内容区域 -->\n <div ref=\"scrollRef\" :class=\"[bem.e('container')]\">\n <!-- 内容区域顶部的盒子用于滚动遮盖/阴影 只有滚动状态下才有,滚动到顶部需要 -->\n <div\n v-show=\"isShowContentTopBox\"\n :class=\"bem.e('content-top-shadow')\"\n ></div>\n <slot />\n </div>\n <!-- 底部区域 -->\n <template v-if=\"showFooter\" #footer>\n <div\n :class=\"`${bem.e('footer')} ${\n isShowContentBottomBox ? bem.e('footer-shadow') : ''\n }`\"\n >\n <slot name=\"footer\">\n <ll-button\n v-if=\"type !== 'confirm'\"\n :label=\"cancelText\"\n size=\"middle\"\n v-bind=\"cancelButtonProps\"\n @click=\"handleCancel\"\n >\n </ll-button>\n <ll-button\n type=\"primary\"\n :loading=\"props.confirmLoading\"\n size=\"middle\"\n :label=\"\n props.confirmText\n ? props.confirmText\n : props.type === 'confirm'\n ? '知道了'\n : '确认'\n \"\n v-bind=\"okButtonProps\"\n @click=\"handleOk\"\n />\n </slot>\n </div>\n </template>\n </Modal>\n</template>\n\n<script lang=\"ts\" setup>\nimport { useAttrs, ref, computed } from 'vue'\n\nimport { Modal } from 'ant-design-vue'\nimport { LlButton } from '@ll-plus/components'\n\nimport { createNamespace } from '@ll-plus/utils'\nimport { omit } from 'lodash-es'\nimport { newModalProps, newModalEmits } from './modal'\nimport { useScroll } from '@ll-plus/hooks'\n\nimport type { ModalProps } from 'ant-design-vue'\n\ndefineOptions({ name: 'LlNewModal' })\n\n// 1.props/emits\nconst props = defineProps(newModalProps)\nconst emits = defineEmits(newModalEmits)\n\n// 2.hooks\nconst attrs = useAttrs()\nconst { scrollPosition, isHasScrollBar, scrollRef } = useScroll()\n\n// 3.ref/computed/const\nconst modal = ref<HTMLElement>()\nconst getBindValue = computed(() => {\n const result: ModalProps = {\n ...omit({ ...attrs }, [...Object.keys(newModalProps), 'wrapClassName'])\n }\n if (!props.showFooter) result.footer = null\n return result\n})\n// 是否现实内容区域顶部的阴影div\nconst isShowContentTopBox = computed(() => {\n return (\n props.isShowTopShadow &&\n scrollPosition.value &&\n isHasScrollBar.value &&\n scrollPosition.value !== 'top'\n )\n})\n// 是否现实内容区域底部的阴影div\nconst isShowContentBottomBox = computed(() => {\n // 如果顶部的阴影为true则说明是内部的容器在滚动产品的阴影 则由容器的滚动情况来决定阴影\n if (props.isShowTopShadow) {\n return isHasScrollBar.value && scrollPosition.value !== 'bottom'\n } else {\n // 如果顶部的阴影为false,则说明不是内部容器滚动,则底部的阴影由 外部的isShowFooterShadow来决定\n return props.isShowFooterShadow\n }\n})\nconst bem = createNamespace('new-modal')\n\n// 3.methods\nconst handleCancel = () => {\n emits('cancel')\n emits('update:open')\n}\nconst handleOk = () => {\n emits('ok')\n}\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAwEA,IAAA,MAAM,KAAQ,GAAA,OAAA,CAAA;AACd,IAAA,MAAM,KAAQ,GAAA,MAAA,CAAA;AAGd,IAAA,MAAM,QAAQ,QAAS,EAAA,CAAA;AACvB,IAAA,MAAM,EAAE,cAAA,EAAgB,cAAgB,EAAA,SAAA,KAAc,SAAU,EAAA,CAAA;AAGhE,IAAA,MAAM,QAAQ,GAAiB,EAAA,CAAA;AAC/B,IAAM,MAAA,YAAA,GAAe,SAAS,MAAM;AAClC,MAAA,MAAM,MAAqB,GAAA;AAAA,QACzB,GAAG,IAAA,CAAK,EAAE,GAAG,KAAM,EAAA,EAAG,CAAC,GAAG,MAAO,CAAA,IAAA,CAAK,aAAa,CAAA,EAAG,eAAe,CAAC,CAAA;AAAA,OACxE,CAAA;AACA,MAAA,IAAI,CAAC,KAAM,CAAA,UAAA;AAAY,QAAA,MAAA,CAAO,MAAS,GAAA,IAAA,CAAA;AACvC,MAAO,OAAA,MAAA,CAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,mBAAA,GAAsB,SAAS,MAAM;AACzC,MAAA,OACE,MAAM,eACN,IAAA,cAAA,CAAe,SACf,cAAe,CAAA,KAAA,IACf,eAAe,KAAU,KAAA,KAAA,CAAA;AAAA,KAE5B,CAAA,CAAA;AAED,IAAM,MAAA,sBAAA,GAAyB,SAAS,MAAM;AAE5C,MAAA,IAAI,MAAM,eAAiB,EAAA;AACzB,QAAO,OAAA,cAAA,CAAe,KAAS,IAAA,cAAA,CAAe,KAAU,KAAA,QAAA,CAAA;AAAA,OACnD,MAAA;AAEL,QAAA,OAAO,KAAM,CAAA,kBAAA,CAAA;AAAA,OACf;AAAA,KACD,CAAA,CAAA;AACD,IAAM,MAAA,GAAA,GAAM,gBAAgB,WAAW,CAAA,CAAA;AAGvC,IAAA,MAAM,eAAe,MAAM;AACzB,MAAA,KAAA,CAAM,QAAQ,CAAA,CAAA;AACd,MAAA,KAAA,CAAM,aAAa,CAAA,CAAA;AAAA,KACrB,CAAA;AACA,IAAA,MAAM,WAAW,MAAM;AACrB,MAAA,KAAA,CAAM,IAAI,CAAA,CAAA;AAAA,KACZ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent, ref, inject, watch, resolveComponent, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, renderSlot, createCommentVNode, createBlock, isRef, withCtx, Fragment, renderList, createVNode } from 'vue';
|
|
1
|
+
import { defineComponent, ref, inject, watch, onUnmounted, resolveComponent, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, renderSlot, createCommentVNode, createBlock, isRef, withCtx, Fragment, renderList, createVNode } from 'vue';
|
|
2
2
|
import '../config/index.mjs';
|
|
3
3
|
import '../../../../utils/index.mjs';
|
|
4
4
|
import '../../../index.mjs';
|
|
@@ -18,6 +18,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
18
18
|
const props = __props;
|
|
19
19
|
const headerSearchRef = ref();
|
|
20
20
|
const contentType = inject("contentType");
|
|
21
|
+
let observer;
|
|
21
22
|
const emits = __emit;
|
|
22
23
|
const bem = createNamespace("table");
|
|
23
24
|
const handleMenuSwitchChange = (event) => {
|
|
@@ -30,19 +31,21 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
30
31
|
headerSearchRef,
|
|
31
32
|
() => {
|
|
32
33
|
if (headerSearchRef.value) {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
34
|
+
if (!observer) {
|
|
35
|
+
observer = new MutationObserver(function(mutations) {
|
|
36
|
+
mutations.forEach(function() {
|
|
37
|
+
const newHeight = headerSearchRef.value.getBoundingClientRect().height;
|
|
38
|
+
emits("changeHeaderSearch", newHeight);
|
|
39
|
+
});
|
|
37
40
|
});
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
41
|
+
const config = {
|
|
42
|
+
childList: true,
|
|
43
|
+
// 观察直接子节点
|
|
44
|
+
subtree: true
|
|
45
|
+
// 及其更低的后代节点
|
|
46
|
+
};
|
|
47
|
+
observer?.observe(headerSearchRef.value, config);
|
|
48
|
+
}
|
|
46
49
|
}
|
|
47
50
|
},
|
|
48
51
|
{
|
|
@@ -50,6 +53,11 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
50
53
|
deep: true
|
|
51
54
|
}
|
|
52
55
|
);
|
|
56
|
+
onUnmounted(() => {
|
|
57
|
+
if (observer) {
|
|
58
|
+
observer.disconnect();
|
|
59
|
+
}
|
|
60
|
+
});
|
|
53
61
|
return (_ctx, _cache) => {
|
|
54
62
|
const _component_a_radio_button = resolveComponent("a-radio-button");
|
|
55
63
|
const _component_a_radio_group = resolveComponent("a-radio-group");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header-search.vue2.mjs","sources":["../../../../../../../packages/components/table/src/components/header-search.vue"],"sourcesContent":["<template>\n <div ref=\"headerSearchRef\" :class=\"`${bem.e('header-wrapper')}`\">\n <div :class=\"bem.e('header')\">\n <slot name=\"header\">\n <!-- 左边的插槽 -->\n <div :class=\"bem.e('header-left')\">\n <slot name=\"headerLeft\"> </slot>\n </div>\n <!-- 内容中间插槽 -->\n <div :class=\"bem.e('header-middle')\">\n <slot name=\"headerMiddle\"></slot>\n </div>\n <div :class=\"bem.e('header-right')\">\n <slot name=\"headerRight\"></slot>\n <!-- 切换table和list菜单 -->\n <a-radio-group\n v-if=\"props.menuSwitchOptions?.show\"\n v-model:value=\"contentType\"\n :class=\"`m-l20 ${bem.e('header-menu-radio-group')}`\"\n @change=\"handleMenuSwitchChange\"\n >\n <a-radio-button\n v-for=\"menuItem in menuSwitchRadioList\"\n :key=\"menuItem.value\"\n :class=\"`${bem.e('header-menu-icon')}`\"\n :value=\"menuItem.value\"\n >\n <ll-icon :icon-name=\"menuItem.icon\" :size=\"18\" />\n </a-radio-button>\n </a-radio-group>\n </div>\n </slot>\n </div>\n </div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref, inject, watch } from 'vue'\n\nimport {\n menuSwitchRadioList,\n tableHeaderSearchEmits,\n ImenuSwitchType\n} from '../config'\nimport { createNamespace } from '@ll-plus/utils'\nimport { tableHeaderSearchProps } from '../config'\n\nimport { LlIcon } from '@ll-plus/components'\n\nimport type { RadioChangeEvent } from 'ant-design-vue'\n\n// 1.defineOptions\ndefineOptions({\n name: 'TableHeaderSearch'\n})\n\n// 2.props\nconst props = defineProps(tableHeaderSearchProps)\n\nconst headerSearchRef = ref() // headerSearch的ref\n// 获取menuswitch\nconst contentType = inject('contentType')\n\n// 3.emits\nconst emits = defineEmits(tableHeaderSearchEmits)\n// 4.const\nconst bem = createNamespace('table')\n\n// 5.methods\n// 切换菜单table\nconst handleMenuSwitchChange = (event: RadioChangeEvent) => {\n const target = event.target\n const value = target.value as ImenuSwitchType\n props.menuSwitchOptions.onChange && props.menuSwitchOptions.onChange(value)\n emits('change', value)\n}\n// 6.watch\nwatch(\n headerSearchRef,\n () => {\n if (headerSearchRef.value) {\n // 创建一个新的MutationObserver对象\n
|
|
1
|
+
{"version":3,"file":"header-search.vue2.mjs","sources":["../../../../../../../packages/components/table/src/components/header-search.vue"],"sourcesContent":["<template>\n <div ref=\"headerSearchRef\" :class=\"`${bem.e('header-wrapper')}`\">\n <div :class=\"bem.e('header')\">\n <slot name=\"header\">\n <!-- 左边的插槽 -->\n <div :class=\"bem.e('header-left')\">\n <slot name=\"headerLeft\"> </slot>\n </div>\n <!-- 内容中间插槽 -->\n <div :class=\"bem.e('header-middle')\">\n <slot name=\"headerMiddle\"></slot>\n </div>\n <div :class=\"bem.e('header-right')\">\n <slot name=\"headerRight\"></slot>\n <!-- 切换table和list菜单 -->\n <a-radio-group\n v-if=\"props.menuSwitchOptions?.show\"\n v-model:value=\"contentType\"\n :class=\"`m-l20 ${bem.e('header-menu-radio-group')}`\"\n @change=\"handleMenuSwitchChange\"\n >\n <a-radio-button\n v-for=\"menuItem in menuSwitchRadioList\"\n :key=\"menuItem.value\"\n :class=\"`${bem.e('header-menu-icon')}`\"\n :value=\"menuItem.value\"\n >\n <ll-icon :icon-name=\"menuItem.icon\" :size=\"18\" />\n </a-radio-button>\n </a-radio-group>\n </div>\n </slot>\n </div>\n </div>\n</template>\n<script lang=\"ts\" setup>\nimport { ref, inject, watch, onUnmounted } from 'vue'\n\nimport {\n menuSwitchRadioList,\n tableHeaderSearchEmits,\n ImenuSwitchType\n} from '../config'\nimport { createNamespace } from '@ll-plus/utils'\nimport { tableHeaderSearchProps } from '../config'\n\nimport { LlIcon } from '@ll-plus/components'\n\nimport type { RadioChangeEvent } from 'ant-design-vue'\n\n// 1.defineOptions\ndefineOptions({\n name: 'TableHeaderSearch'\n})\n\n// 2.props\nconst props = defineProps(tableHeaderSearchProps)\n\nconst headerSearchRef = ref() // headerSearch的ref\n// 获取menuswitch\nconst contentType = inject('contentType')\nlet observer: MutationObserver // 监听dom内容发生变化\n\n// 3.emits\nconst emits = defineEmits(tableHeaderSearchEmits)\n// 4.const\nconst bem = createNamespace('table')\n\n// 5.methods\n// 切换菜单table\nconst handleMenuSwitchChange = (event: RadioChangeEvent) => {\n const target = event.target\n const value = target.value as ImenuSwitchType\n props.menuSwitchOptions.onChange && props.menuSwitchOptions.onChange(value)\n emits('change', value)\n}\n// 6.watch\nwatch(\n headerSearchRef,\n () => {\n if (headerSearchRef.value) {\n // 创建一个新的MutationObserver对象\n if (!observer) {\n observer = new MutationObserver(function (mutations) {\n mutations.forEach(function () {\n // 检查容器的高度变化\n const newHeight =\n headerSearchRef.value.getBoundingClientRect().height\n emits('changeHeaderSearch', newHeight)\n })\n })\n\n // 配置MutationObserver,监听子节点的变化\n const config = {\n childList: true, // 观察直接子节点\n subtree: true // 及其更低的后代节点\n }\n\n // 开始监听容器的变化\n observer?.observe(headerSearchRef.value, config)\n }\n }\n },\n {\n immediate: true,\n deep: true\n }\n)\n\n// 组件卸载停止监听\nonUnmounted(() => {\n if (observer) {\n observer.disconnect()\n }\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAwDA,IAAA,MAAM,KAAQ,GAAA,OAAA,CAAA;AAEd,IAAA,MAAM,kBAAkB,GAAI,EAAA,CAAA;AAE5B,IAAM,MAAA,WAAA,GAAc,OAAO,aAAa,CAAA,CAAA;AACxC,IAAI,IAAA,QAAA,CAAA;AAGJ,IAAA,MAAM,KAAQ,GAAA,MAAA,CAAA;AAEd,IAAM,MAAA,GAAA,GAAM,gBAAgB,OAAO,CAAA,CAAA;AAInC,IAAM,MAAA,sBAAA,GAAyB,CAAC,KAA4B,KAAA;AAC1D,MAAA,MAAM,SAAS,KAAM,CAAA,MAAA,CAAA;AACrB,MAAA,MAAM,QAAQ,MAAO,CAAA,KAAA,CAAA;AACrB,MAAA,KAAA,CAAM,iBAAkB,CAAA,QAAA,IAAY,KAAM,CAAA,iBAAA,CAAkB,SAAS,KAAK,CAAA,CAAA;AAC1E,MAAA,KAAA,CAAM,UAAU,KAAK,CAAA,CAAA;AAAA,KACvB,CAAA;AAEA,IAAA,KAAA;AAAA,MACE,eAAA;AAAA,MACA,MAAM;AACJ,QAAA,IAAI,gBAAgB,KAAO,EAAA;AAEzB,UAAA,IAAI,CAAC,QAAU,EAAA;AACb,YAAW,QAAA,GAAA,IAAI,gBAAiB,CAAA,SAAU,SAAW,EAAA;AACnD,cAAA,SAAA,CAAU,QAAQ,WAAY;AAE5B,gBAAA,MAAM,SACJ,GAAA,eAAA,CAAgB,KAAM,CAAA,qBAAA,EAAwB,CAAA,MAAA,CAAA;AAChD,gBAAA,KAAA,CAAM,sBAAsB,SAAS,CAAA,CAAA;AAAA,eACtC,CAAA,CAAA;AAAA,aACF,CAAA,CAAA;AAGD,YAAA,MAAM,MAAS,GAAA;AAAA,cACb,SAAW,EAAA,IAAA;AAAA;AAAA,cACX,OAAS,EAAA,IAAA;AAAA;AAAA,aACX,CAAA;AAGA,YAAU,QAAA,EAAA,OAAA,CAAQ,eAAgB,CAAA,KAAA,EAAO,MAAM,CAAA,CAAA;AAAA,WACjD;AAAA,SACF;AAAA,OACF;AAAA,MACA;AAAA,QACE,SAAW,EAAA,IAAA;AAAA,QACX,IAAM,EAAA,IAAA;AAAA,OACR;AAAA,KACF,CAAA;AAGA,IAAA,WAAA,CAAY,MAAM;AAChB,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,OACtB;AAAA,KACD,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -5,8 +5,18 @@ function useScroll() {
|
|
|
5
5
|
const scrollRef = ref();
|
|
6
6
|
const scrollPosition = ref();
|
|
7
7
|
const isHasScrollBar = ref(false);
|
|
8
|
+
let observer;
|
|
9
|
+
let timer;
|
|
8
10
|
const handleScroll = (event) => {
|
|
9
11
|
const target = event.target;
|
|
12
|
+
getSrcollPosition(target);
|
|
13
|
+
};
|
|
14
|
+
const getSrcollPosition = (target) => {
|
|
15
|
+
if (target.scrollHeight > target.offsetHeight) {
|
|
16
|
+
isHasScrollBar.value = true;
|
|
17
|
+
} else {
|
|
18
|
+
isHasScrollBar.value = false;
|
|
19
|
+
}
|
|
10
20
|
if (!!target.scrollTop) {
|
|
11
21
|
if (target.scrollTop + target.offsetHeight >= target.scrollHeight - 1) {
|
|
12
22
|
scrollPosition.value = "bottom";
|
|
@@ -21,9 +31,11 @@ function useScroll() {
|
|
|
21
31
|
scrollRef,
|
|
22
32
|
() => {
|
|
23
33
|
if (scrollRef.value) {
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
34
|
+
timer = setTimeout(() => {
|
|
35
|
+
if (scrollRef.value.scrollHeight > scrollRef.value.offsetHeight) {
|
|
36
|
+
isHasScrollBar.value = true;
|
|
37
|
+
}
|
|
38
|
+
}, 10);
|
|
27
39
|
scrollRef.value.addEventListener("scroll", handleScroll);
|
|
28
40
|
}
|
|
29
41
|
},
|
|
@@ -32,11 +44,68 @@ function useScroll() {
|
|
|
32
44
|
deep: true
|
|
33
45
|
}
|
|
34
46
|
);
|
|
47
|
+
const handleWindowResize = () => {
|
|
48
|
+
getSrcollPosition(scrollRef.value);
|
|
49
|
+
};
|
|
50
|
+
watch(
|
|
51
|
+
scrollRef,
|
|
52
|
+
() => {
|
|
53
|
+
if (scrollRef.value) {
|
|
54
|
+
window.addEventListener("resize", handleWindowResize);
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
immediate: true,
|
|
59
|
+
deep: true
|
|
60
|
+
}
|
|
61
|
+
);
|
|
62
|
+
watch(
|
|
63
|
+
scrollRef,
|
|
64
|
+
() => {
|
|
65
|
+
if (scrollRef.value) {
|
|
66
|
+
if (!observer) {
|
|
67
|
+
observer = new MutationObserver(function(mutations) {
|
|
68
|
+
mutations.forEach(function() {
|
|
69
|
+
if (scrollRef.value.scrollHeight > scrollRef.value.offsetHeight) {
|
|
70
|
+
isHasScrollBar.value = true;
|
|
71
|
+
}
|
|
72
|
+
scrollRef.value.addEventListener("scroll", handleScroll);
|
|
73
|
+
});
|
|
74
|
+
});
|
|
75
|
+
const config = {
|
|
76
|
+
childList: true,
|
|
77
|
+
// 观察直接子节点
|
|
78
|
+
subtree: true
|
|
79
|
+
// 及其更低的后代节点
|
|
80
|
+
};
|
|
81
|
+
observer.observe(scrollRef.value, config);
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
{
|
|
86
|
+
immediate: true,
|
|
87
|
+
deep: true
|
|
88
|
+
}
|
|
89
|
+
);
|
|
35
90
|
onUnmounted(() => {
|
|
36
91
|
if (scrollRef.value) {
|
|
37
92
|
scrollRef.value?.removeEventListener("scroll", handleScroll);
|
|
38
93
|
}
|
|
39
94
|
});
|
|
95
|
+
onUnmounted(() => {
|
|
96
|
+
window.removeEventListener("resize", handleWindowResize);
|
|
97
|
+
});
|
|
98
|
+
onUnmounted(() => {
|
|
99
|
+
if (observer) {
|
|
100
|
+
observer.disconnect();
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
onUnmounted(() => {
|
|
104
|
+
if (timer) {
|
|
105
|
+
clearTimeout(timer);
|
|
106
|
+
timer = null;
|
|
107
|
+
}
|
|
108
|
+
});
|
|
40
109
|
return { scrollRef, isHasScrollBar, scrollPosition };
|
|
41
110
|
}
|
|
42
111
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-scroll/index.ts"],"sourcesContent":["/**\n * @description:
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-scroll/index.ts"],"sourcesContent":["/**\n * @description: 用于监听滚动行为/window的resize监听/滚动区域内的dom动态增删dom来添加阴影\n * @return {HTMLElement} elementRef 要滚动监听的dom\n * @return {scrollPosition} IScrollPosition 监听的位置\n */\nimport { onUnmounted, ref, watch } from 'vue'\n\ntype IScrollPosition = 'top' | 'scrolling' | 'bottom' // 滚动到最顶部、滚动中、滚动到最底部\nexport function useScroll() {\n const scrollRef = ref<HTMLElement>() // 监听滚动的dom\n const scrollPosition = ref<IScrollPosition>() // 滚动到的位置\n const isHasScrollBar = ref(false) // 是否有滚动条\n let observer: MutationObserver // 监听dom内容发生变化\n let timer\n\n // 滚动事件\n const handleScroll = (event: Event) => {\n const target = event.target as HTMLElement\n getSrcollPosition(target)\n }\n // 判断滚动位置\n const getSrcollPosition = (target: HTMLElement) => {\n // 判断是否有滚动体条\n if (target.scrollHeight > target.offsetHeight) {\n isHasScrollBar.value = true\n } else {\n isHasScrollBar.value = false\n }\n if (!!target.scrollTop) {\n // 有0.5px的误差 故-1\n if (target.scrollTop + target.offsetHeight >= target.scrollHeight - 1) {\n // 在最底部\n scrollPosition.value = 'bottom'\n } else {\n // 滚动中\n scrollPosition.value = 'scrolling'\n }\n } else {\n // 在最顶部\n scrollPosition.value = 'top'\n }\n }\n\n // dom挂载完成的监听滚动事件\n watch(\n scrollRef,\n () => {\n if (scrollRef.value) {\n // 防止子元素没有加载出来没有高度\n timer = setTimeout(() => {\n if (scrollRef.value!.scrollHeight > scrollRef.value!.offsetHeight) {\n isHasScrollBar.value = true\n }\n }, 10)\n scrollRef.value.addEventListener('scroll', handleScroll)\n }\n },\n {\n immediate: true,\n deep: true\n }\n )\n\n // 监听window的resize事件\n const handleWindowResize = () => {\n getSrcollPosition(scrollRef.value!)\n }\n // 监听window的resize\n watch(\n scrollRef,\n () => {\n if (scrollRef.value) {\n window.addEventListener('resize', handleWindowResize)\n }\n },\n {\n immediate: true,\n deep: true\n }\n )\n\n // 监视对 DOM 树所做更改的能力(对dom增删改等)\n watch(\n scrollRef,\n () => {\n if (scrollRef.value) {\n if (!observer) {\n observer = new MutationObserver(function (mutations) {\n mutations.forEach(function () {\n // 检查容器的高度变化\n if (\n scrollRef.value!.scrollHeight > scrollRef.value!.offsetHeight\n ) {\n isHasScrollBar.value = true\n }\n scrollRef.value!.addEventListener('scroll', handleScroll)\n })\n })\n // 配置MutationObserver,监听子节点的变化\n const config = {\n childList: true, // 观察直接子节点\n subtree: true // 及其更低的后代节点\n }\n // 开始监听容器的变化\n observer.observe(scrollRef.value!, config)\n }\n }\n },\n {\n immediate: true,\n deep: true\n }\n )\n\n // 卸载滚动事件\n onUnmounted(() => {\n if (scrollRef.value) {\n scrollRef.value?.removeEventListener('scroll', handleScroll)\n }\n })\n // 卸载停止resize\n onUnmounted(() => {\n window.removeEventListener('resize', handleWindowResize)\n })\n // 组件卸载停止监听\n onUnmounted(() => {\n if (observer) {\n observer.disconnect()\n }\n })\n\n // 清空定时器\n onUnmounted(() => {\n if (timer) {\n clearTimeout(timer)\n timer = null\n }\n })\n\n return { scrollRef, isHasScrollBar, scrollPosition }\n}\n"],"names":[],"mappings":"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"}
|