mortise-tenon-design 0.0.15 → 0.0.16
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/components/expand-box/index.d.ts +8 -67
- package/es/components/expand-box/src/expand-box.css +1 -1
- package/es/components/expand-box/src/expand-box.d.ts +3 -14
- package/es/components/expand-box/src/expand-box.vue.d.ts +4 -46
- package/es/components/expand-box/src/expand-box.vue.mjs +1 -1
- package/es/components/expand-box/src/expand-box.vue2.mjs +27 -85
- package/es/components/expand-box/src/expand-box.vue2.mjs.map +1 -1
- package/es/hooks/index.d.ts +1 -0
- package/es/hooks/use-throttle-control/index.d.ts +14 -0
- package/es/hooks/use-throttle-control/index.mjs +29 -0
- package/es/hooks/use-throttle-control/index.mjs.map +1 -0
- package/es/index.mjs +4 -2
- package/es/index.mjs.map +1 -1
- package/lib/components/expand-box/index.d.ts +8 -67
- package/lib/components/expand-box/src/expand-box.css +1 -1
- package/lib/components/expand-box/src/expand-box.d.ts +3 -14
- package/lib/components/expand-box/src/expand-box.vue.d.ts +4 -46
- package/lib/components/expand-box/src/expand-box.vue.js +1 -1
- package/lib/components/expand-box/src/expand-box.vue2.js +1 -1
- package/lib/components/expand-box/src/expand-box.vue2.js.map +1 -1
- package/lib/hooks/index.d.ts +1 -0
- package/lib/hooks/use-throttle-control/index.d.ts +14 -0
- package/lib/hooks/use-throttle-control/index.js +2 -0
- package/lib/hooks/use-throttle-control/index.js.map +1 -0
- package/lib/index.js +1 -1
- package/package.json +1 -1
|
@@ -1,20 +1,8 @@
|
|
|
1
1
|
export declare const MtExpandBox: {
|
|
2
|
-
new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{
|
|
3
|
-
"onUpdate:open"?: ((open: boolean) => any) | undefined;
|
|
4
|
-
onChange?: ((value: boolean) => any) | undefined;
|
|
5
|
-
}>, {
|
|
6
|
-
isOutRange: import('vue').ComputedRef<boolean>;
|
|
7
|
-
hasExtendMore: import('vue').Ref<boolean, boolean>;
|
|
8
|
-
changeExtendMore: (value: boolean) => void;
|
|
9
|
-
toggleExtendMore: () => void;
|
|
10
|
-
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
11
|
-
"update:open": (open: boolean) => any;
|
|
12
|
-
change: (value: boolean) => any;
|
|
13
|
-
}, import('vue').PublicProps, {
|
|
2
|
+
new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
|
|
14
3
|
open: boolean;
|
|
15
4
|
targetRange: number;
|
|
16
|
-
transitionTime:
|
|
17
|
-
placement: "top" | "bottom";
|
|
5
|
+
transitionTime: number;
|
|
18
6
|
}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
|
|
19
7
|
P: {};
|
|
20
8
|
B: {};
|
|
@@ -22,70 +10,23 @@ export declare const MtExpandBox: {
|
|
|
22
10
|
C: {};
|
|
23
11
|
M: {};
|
|
24
12
|
Defaults: {};
|
|
25
|
-
}, Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{
|
|
26
|
-
"onUpdate:open"?: ((open: boolean) => any) | undefined;
|
|
27
|
-
onChange?: ((value: boolean) => any) | undefined;
|
|
28
|
-
}>, {
|
|
29
|
-
isOutRange: import('vue').ComputedRef<boolean>;
|
|
30
|
-
hasExtendMore: import('vue').Ref<boolean, boolean>;
|
|
31
|
-
changeExtendMore: (value: boolean) => void;
|
|
32
|
-
toggleExtendMore: () => void;
|
|
33
|
-
}, {}, {}, {}, {
|
|
13
|
+
}, Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{}>, {}, {}, {}, {}, {
|
|
34
14
|
open: boolean;
|
|
35
15
|
targetRange: number;
|
|
36
|
-
transitionTime:
|
|
37
|
-
placement: "top" | "bottom";
|
|
16
|
+
transitionTime: number;
|
|
38
17
|
}>;
|
|
39
18
|
__isFragment?: never;
|
|
40
19
|
__isTeleport?: never;
|
|
41
20
|
__isSuspense?: never;
|
|
42
|
-
} & import('vue').ComponentOptionsBase<Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{
|
|
43
|
-
"onUpdate:open"?: ((open: boolean) => any) | undefined;
|
|
44
|
-
onChange?: ((value: boolean) => any) | undefined;
|
|
45
|
-
}>, {
|
|
46
|
-
isOutRange: import('vue').ComputedRef<boolean>;
|
|
47
|
-
hasExtendMore: import('vue').Ref<boolean, boolean>;
|
|
48
|
-
changeExtendMore: (value: boolean) => void;
|
|
49
|
-
toggleExtendMore: () => void;
|
|
50
|
-
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
51
|
-
"update:open": (open: boolean) => any;
|
|
52
|
-
change: (value: boolean) => any;
|
|
53
|
-
}, string, {
|
|
21
|
+
} & import('vue').ComponentOptionsBase<Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
|
|
54
22
|
open: boolean;
|
|
55
23
|
targetRange: number;
|
|
56
|
-
transitionTime:
|
|
57
|
-
placement: "top" | "bottom";
|
|
24
|
+
transitionTime: number;
|
|
58
25
|
}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
|
|
59
26
|
$slots: {
|
|
60
|
-
|
|
61
|
-
|
|
27
|
+
default?(_: {
|
|
28
|
+
open: boolean;
|
|
62
29
|
isOutRange: boolean;
|
|
63
|
-
toggleExtendMore: () => void;
|
|
64
|
-
}): any;
|
|
65
|
-
content?(_: {
|
|
66
|
-
hasExtendMore: boolean;
|
|
67
|
-
isOutRange: boolean;
|
|
68
|
-
toggleExtendMore: () => void;
|
|
69
|
-
}): any;
|
|
70
|
-
custom?(_: {
|
|
71
|
-
hasExtendMore: boolean;
|
|
72
|
-
isOutRange: boolean;
|
|
73
|
-
toggleExtendMore: () => void;
|
|
74
|
-
}): any;
|
|
75
|
-
before?(_: {
|
|
76
|
-
hasExtendMore: boolean;
|
|
77
|
-
isOutRange: boolean;
|
|
78
|
-
toggleExtendMore: () => void;
|
|
79
|
-
}): any;
|
|
80
|
-
button?(_: {
|
|
81
|
-
hasExtendMore: boolean;
|
|
82
|
-
isOutRange: boolean;
|
|
83
|
-
toggleExtendMore: () => void;
|
|
84
|
-
}): any;
|
|
85
|
-
after?(_: {
|
|
86
|
-
hasExtendMore: boolean;
|
|
87
|
-
isOutRange: boolean;
|
|
88
|
-
toggleExtendMore: () => void;
|
|
89
30
|
}): any;
|
|
90
31
|
};
|
|
91
32
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
.mt-expand-box[data-v-c6fd30b0]{overflow:hidden}.mt-expand-transition[data-v-c6fd30b0]{transition:height var(--6beda65b) ease-in-out}
|
|
@@ -1,19 +1,8 @@
|
|
|
1
|
-
import { CSSProperties } from 'vue';
|
|
2
1
|
export interface ExpandBoxProps {
|
|
3
|
-
/**
|
|
2
|
+
/** 控制是否展开 */
|
|
4
3
|
open?: boolean;
|
|
5
4
|
/** 达到可调整的目标范围(px) */
|
|
6
5
|
targetRange?: number;
|
|
7
|
-
/** 过渡时间 */
|
|
8
|
-
transitionTime?:
|
|
9
|
-
/** 展开按钮样式 */
|
|
10
|
-
buttonStyle?: CSSProperties;
|
|
11
|
-
/** 展开的位置 */
|
|
12
|
-
placement?: 'top' | 'bottom';
|
|
13
|
-
}
|
|
14
|
-
export interface ExpandBoxEmits {
|
|
15
|
-
/** open绑定修改 */
|
|
16
|
-
(e: 'update:open', open: boolean): void;
|
|
17
|
-
/** 展开状态变更 */
|
|
18
|
-
(e: 'change', value: boolean): void;
|
|
6
|
+
/** 过渡时间(ms) */
|
|
7
|
+
transitionTime?: number;
|
|
19
8
|
}
|
|
@@ -1,39 +1,9 @@
|
|
|
1
1
|
import { ExpandBoxProps } from './expand-box';
|
|
2
|
-
/** 修改是否展开更多 */
|
|
3
|
-
declare function changeExtendMore(value: boolean): void;
|
|
4
|
-
/** 切换是否展开更多 */
|
|
5
|
-
declare function toggleExtendMore(): void;
|
|
6
2
|
declare function __VLS_template(): {
|
|
7
3
|
slots: {
|
|
8
|
-
|
|
9
|
-
|
|
4
|
+
default?(_: {
|
|
5
|
+
open: boolean;
|
|
10
6
|
isOutRange: boolean;
|
|
11
|
-
toggleExtendMore: typeof toggleExtendMore;
|
|
12
|
-
}): any;
|
|
13
|
-
content?(_: {
|
|
14
|
-
hasExtendMore: boolean;
|
|
15
|
-
isOutRange: boolean;
|
|
16
|
-
toggleExtendMore: typeof toggleExtendMore;
|
|
17
|
-
}): any;
|
|
18
|
-
custom?(_: {
|
|
19
|
-
hasExtendMore: boolean;
|
|
20
|
-
isOutRange: boolean;
|
|
21
|
-
toggleExtendMore: typeof toggleExtendMore;
|
|
22
|
-
}): any;
|
|
23
|
-
before?(_: {
|
|
24
|
-
hasExtendMore: boolean;
|
|
25
|
-
isOutRange: boolean;
|
|
26
|
-
toggleExtendMore: typeof toggleExtendMore;
|
|
27
|
-
}): any;
|
|
28
|
-
button?(_: {
|
|
29
|
-
hasExtendMore: boolean;
|
|
30
|
-
isOutRange: boolean;
|
|
31
|
-
toggleExtendMore: typeof toggleExtendMore;
|
|
32
|
-
}): any;
|
|
33
|
-
after?(_: {
|
|
34
|
-
hasExtendMore: boolean;
|
|
35
|
-
isOutRange: boolean;
|
|
36
|
-
toggleExtendMore: typeof toggleExtendMore;
|
|
37
7
|
}): any;
|
|
38
8
|
};
|
|
39
9
|
refs: {
|
|
@@ -42,22 +12,10 @@ declare function __VLS_template(): {
|
|
|
42
12
|
attrs: Partial<{}>;
|
|
43
13
|
};
|
|
44
14
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
45
|
-
declare const __VLS_component: import('vue').DefineComponent<ExpandBoxProps, {
|
|
46
|
-
isOutRange: import('vue').ComputedRef<boolean>;
|
|
47
|
-
hasExtendMore: import('vue').Ref<boolean, boolean>;
|
|
48
|
-
changeExtendMore: typeof changeExtendMore;
|
|
49
|
-
toggleExtendMore: typeof toggleExtendMore;
|
|
50
|
-
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
51
|
-
"update:open": (open: boolean) => any;
|
|
52
|
-
change: (value: boolean) => any;
|
|
53
|
-
}, string, import('vue').PublicProps, Readonly<ExpandBoxProps> & Readonly<{
|
|
54
|
-
"onUpdate:open"?: ((open: boolean) => any) | undefined;
|
|
55
|
-
onChange?: ((value: boolean) => any) | undefined;
|
|
56
|
-
}>, {
|
|
15
|
+
declare const __VLS_component: import('vue').DefineComponent<ExpandBoxProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ExpandBoxProps> & Readonly<{}>, {
|
|
57
16
|
open: boolean;
|
|
58
17
|
targetRange: number;
|
|
59
|
-
transitionTime:
|
|
60
|
-
placement: "top" | "bottom";
|
|
18
|
+
transitionTime: number;
|
|
61
19
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
62
20
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
63
21
|
export default _default;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./expand-box.vue2.mjs";
|
|
2
2
|
/* empty css */
|
|
3
3
|
import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
|
|
4
|
-
const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-
|
|
4
|
+
const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-c6fd30b0"]]);
|
|
5
5
|
export {
|
|
6
6
|
f as default
|
|
7
7
|
};
|
|
@@ -1,98 +1,40 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
import {
|
|
3
|
-
|
|
1
|
+
import { defineComponent as m, useCssVars as p, computed as a, ref as i, onMounted as d, openBlock as f, createElementBlock as g, normalizeClass as v, normalizeStyle as R, createElementVNode as b, renderSlot as x } from "vue";
|
|
2
|
+
import { useResizeObserver as y } from "@vueuse/core";
|
|
3
|
+
import { debounce as z } from "lodash-es";
|
|
4
|
+
const k = /* @__PURE__ */ m({
|
|
4
5
|
__name: "expand-box",
|
|
5
6
|
props: {
|
|
6
7
|
open: { type: Boolean, default: !1 },
|
|
7
8
|
targetRange: { default: 0 },
|
|
8
|
-
transitionTime: { default:
|
|
9
|
-
buttonStyle: {},
|
|
10
|
-
placement: { default: "bottom" }
|
|
9
|
+
transitionTime: { default: 200 }
|
|
11
10
|
},
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
overflow: "hidden",
|
|
16
|
-
height: `${!r.value || t.value ? f.value : u.targetRange}px`,
|
|
17
|
-
transition: `height ${u.transitionTime} ease-in-out`
|
|
11
|
+
setup(l) {
|
|
12
|
+
p((e) => ({
|
|
13
|
+
"6beda65b": u.value
|
|
18
14
|
}));
|
|
19
|
-
|
|
20
|
-
() => u.open,
|
|
21
|
-
(e) => {
|
|
22
|
-
t.value = e;
|
|
23
|
-
},
|
|
24
|
-
{ immediate: !0 }
|
|
25
|
-
);
|
|
26
|
-
function k(e) {
|
|
27
|
-
b("change", e), b("update:open", e), t.value = e;
|
|
28
|
-
}
|
|
29
|
-
function m() {
|
|
30
|
-
k(!t.value);
|
|
31
|
-
}
|
|
32
|
-
const o = g(() => ({
|
|
33
|
-
hasExtendMore: t.value,
|
|
34
|
-
isOutRange: r.value,
|
|
35
|
-
toggleExtendMore: m
|
|
36
|
-
}));
|
|
37
|
-
function $() {
|
|
15
|
+
const t = l, u = a(() => `${t.transitionTime}ms`), n = i(0), s = a(() => n.value > t.targetRange), c = a(() => ({ height: `${!s.value || t.open ? n.value : t.targetRange}px` })), o = i(), r = z(() => {
|
|
38
16
|
var e;
|
|
39
|
-
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
changeExtendMore: k,
|
|
51
|
-
toggleExtendMore: m
|
|
52
|
-
}), (e, T) => (c(), d("div", null, [
|
|
53
|
-
e.placement === "top" ? (c(), d("div", {
|
|
54
|
-
key: 0,
|
|
55
|
-
style: h(y.value)
|
|
56
|
-
}, [
|
|
57
|
-
v("div", {
|
|
58
|
-
ref_key: "contentRef",
|
|
59
|
-
ref: i
|
|
60
|
-
}, [
|
|
61
|
-
a(e.$slots, "content", l(s(o.value)), void 0, !0)
|
|
62
|
-
], 512)
|
|
63
|
-
], 4)) : R("", !0),
|
|
64
|
-
a(e.$slots, "custom", l(s(o.value)), () => [
|
|
65
|
-
v("div", P, [
|
|
66
|
-
a(e.$slots, "before", l(s(o.value)), void 0, !0),
|
|
67
|
-
r.value ? (c(), d("div", {
|
|
68
|
-
key: 0,
|
|
69
|
-
class: "extend-button",
|
|
70
|
-
style: h(e.buttonStyle),
|
|
71
|
-
onClick: m
|
|
72
|
-
}, [
|
|
73
|
-
a(e.$slots, "button", l(s(o.value)), void 0, !0),
|
|
74
|
-
v("div", {
|
|
75
|
-
class: N(["btn-icon", { active: t.value }])
|
|
76
|
-
}, " ﹀ ", 2)
|
|
77
|
-
], 4)) : R("", !0),
|
|
78
|
-
a(e.$slots, "after", l(s(o.value)), void 0, !0)
|
|
79
|
-
])
|
|
80
|
-
], !0),
|
|
81
|
-
e.placement === "bottom" ? (c(), d("div", {
|
|
82
|
-
key: 1,
|
|
83
|
-
style: h(y.value)
|
|
17
|
+
n.value = (e = o.value) == null ? void 0 : e.offsetHeight;
|
|
18
|
+
}, t.transitionTime);
|
|
19
|
+
return y(o, r), d(() => {
|
|
20
|
+
r();
|
|
21
|
+
}), (e, _) => (f(), g("div", {
|
|
22
|
+
class: v(["mt-expand-box", { "mt-expand-transition": !!e.transitionTime }]),
|
|
23
|
+
style: R(c.value)
|
|
24
|
+
}, [
|
|
25
|
+
b("div", {
|
|
26
|
+
ref_key: "contentRef",
|
|
27
|
+
ref: o
|
|
84
28
|
}, [
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
},
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
], 4)) : R("", !0)
|
|
92
|
-
]));
|
|
29
|
+
x(e.$slots, "default", {
|
|
30
|
+
open: e.open,
|
|
31
|
+
isOutRange: s.value
|
|
32
|
+
}, void 0, !0)
|
|
33
|
+
], 512)
|
|
34
|
+
], 6));
|
|
93
35
|
}
|
|
94
36
|
});
|
|
95
37
|
export {
|
|
96
|
-
|
|
38
|
+
k as default
|
|
97
39
|
};
|
|
98
40
|
//# sourceMappingURL=expand-box.vue2.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"expand-box.vue2.mjs","sources":["../../../../../../packages/components/expand-box/src/expand-box.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type {
|
|
1
|
+
{"version":3,"file":"expand-box.vue2.mjs","sources":["../../../../../../packages/components/expand-box/src/expand-box.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type { ExpandBoxProps } from './expand-box';\r\nimport { useResizeObserver } from '@vueuse/core';\r\nimport { debounce } from 'lodash-es';\r\nimport { computed, onMounted, ref } from 'vue';\r\n\r\nconst props = withDefaults(defineProps<ExpandBoxProps>(), {\r\n open: false,\r\n targetRange: 0,\r\n transitionTime: 200,\r\n});\r\n\r\nconst transitionDuration = computed(() => `${props.transitionTime}ms`);\r\n\r\n/** 内容的范围 */\r\nconst contentRange = ref(0);\r\n\r\n/** 是否超出目标范围 */\r\nconst isOutRange = computed(() => contentRange.value > props.targetRange);\r\n\r\n/** 展开或收起后内容样式 */\r\nconst contentStyle = computed(() => {\r\n const size = !isOutRange.value || props.open ? contentRange.value : props.targetRange;\r\n return { height: `${size}px` };\r\n});\r\n\r\n/** 内容实例 */\r\nconst contentRef = ref();\r\n\r\n/** 获取内容实际范围 */\r\nconst getContentRange = debounce(() => {\r\n contentRange.value = contentRef.value?.offsetHeight;\r\n}, props.transitionTime);\r\n\r\n// 监听内容高度变化\r\nuseResizeObserver(contentRef, getContentRange);\r\n\r\n// 初始化内容\r\nonMounted(() => {\r\n getContentRange();\r\n});\r\n</script>\r\n\r\n<template>\r\n <div\r\n class=\"mt-expand-box\"\r\n :class=\"{ 'mt-expand-transition': !!transitionTime }\"\r\n :style=\"contentStyle\"\r\n >\r\n <div ref=\"contentRef\">\r\n <slot :open=\"open\" :is-out-range=\"isOutRange\" />\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n.mt-expand-box {\r\n overflow: hidden;\r\n}\r\n\r\n.mt-expand-transition {\r\n transition: height v-bind(transitionDuration) ease-in-out;\r\n}\r\n</style>\r\n"],"names":["props","__props","transitionDuration","computed","contentRange","ref","isOutRange","contentStyle","contentRef","getContentRange","debounce","_a","useResizeObserver","onMounted"],"mappings":";;;;;;;;;;;;;;AAMA,UAAMA,IAAQC,GAMRC,IAAqBC,EAAS,MAAM,GAAGH,EAAM,cAAc,IAAI,GAG/DI,IAAeC,EAAI,CAAC,GAGpBC,IAAaH,EAAS,MAAMC,EAAa,QAAQJ,EAAM,WAAW,GAGlEO,IAAeJ,EAAS,OAErB,EAAE,QAAQ,GADJ,CAACG,EAAW,SAASN,EAAM,OAAOI,EAAa,QAAQJ,EAAM,WAClD,KAAK,EAC9B,GAGKQ,IAAaH,KAGbI,IAAkBC,EAAS,MAAM;;AACxB,MAAAN,EAAA,SAAQO,IAAAH,EAAW,UAAX,gBAAAG,EAAkB;AAAA,IAAA,GACtCX,EAAM,cAAc;AAGvB,WAAAY,EAAkBJ,GAAYC,CAAe,GAG7CI,EAAU,MAAM;AACE,MAAAJ;IAAA,CACjB;;;;;;;;;;;;;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './use-throttle-control';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
type AnyFn = (...args: any[]) => any;
|
|
2
|
+
/**
|
|
3
|
+
* 节流控制
|
|
4
|
+
* @param ms 节流时间(ms)
|
|
5
|
+
* @param fn 节流函数
|
|
6
|
+
*/
|
|
7
|
+
export declare function useThrottleControl<Fn extends AnyFn>(ms?: number, fn?: Fn): {
|
|
8
|
+
throttleOpen: import('vue').Ref<boolean, boolean>;
|
|
9
|
+
throttleFn: Fn;
|
|
10
|
+
openThrottle: () => NodeJS.Timeout;
|
|
11
|
+
closeThrottle: (timer?: NodeJS.Timeout) => void;
|
|
12
|
+
};
|
|
13
|
+
export type UseThrottleControlReturn = ReturnType<typeof useThrottleControl>;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { ref as c, onBeforeUnmount as f } from "vue";
|
|
2
|
+
function a(l = 200, n) {
|
|
3
|
+
const e = c(!1);
|
|
4
|
+
let t;
|
|
5
|
+
function u() {
|
|
6
|
+
return o(), e.value = !0, t = setTimeout(() => {
|
|
7
|
+
o();
|
|
8
|
+
}, l), t;
|
|
9
|
+
}
|
|
10
|
+
function o(r) {
|
|
11
|
+
(!r || r === t) && (e.value = !1, t && (clearTimeout(t), t = void 0));
|
|
12
|
+
}
|
|
13
|
+
const i = (...r) => {
|
|
14
|
+
if (!e.value)
|
|
15
|
+
return u(), n == null ? void 0 : n(...r);
|
|
16
|
+
};
|
|
17
|
+
return f(() => {
|
|
18
|
+
o();
|
|
19
|
+
}), {
|
|
20
|
+
throttleOpen: e,
|
|
21
|
+
throttleFn: i,
|
|
22
|
+
openThrottle: u,
|
|
23
|
+
closeThrottle: o
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
export {
|
|
27
|
+
a as useThrottleControl
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../../../../packages/hooks/use-throttle-control/index.ts"],"sourcesContent":["import { onBeforeUnmount, ref } from 'vue';\r\n\r\ntype AnyFn = (...args: any[]) => any;\r\n\r\n/**\r\n * 节流控制\r\n * @param ms 节流时间(ms)\r\n * @param fn 节流函数\r\n */\r\nexport function useThrottleControl<Fn extends AnyFn>(ms: number = 200, fn?: Fn) {\r\n /** 节流状态 */\r\n const throttleOpen = ref(false);\r\n /** 当前执行的定时器 */\r\n let runningTimer: NodeJS.Timeout | undefined;\r\n\r\n /** 开启节流，已在执行的会被覆盖 */\r\n function openThrottle() {\r\n closeThrottle();\r\n throttleOpen.value = true;\r\n runningTimer = setTimeout(() => {\r\n closeThrottle();\r\n }, ms);\r\n return runningTimer;\r\n }\r\n\r\n /** 关闭节流定时器 */\r\n function closeThrottle(timer?: NodeJS.Timeout) {\r\n // 如果有传入timer时，会判断是否为当前执行开启的定时器\r\n if (!timer || timer === runningTimer) {\r\n throttleOpen.value = false;\r\n if (runningTimer) {\r\n clearTimeout(runningTimer);\r\n runningTimer = undefined;\r\n }\r\n }\r\n }\r\n\r\n /** 节流控制方法 */\r\n const throttleFn = ((...args: any[]) => {\r\n // 节流状态开启中，不可重复执行\r\n if (throttleOpen.value) {\r\n return;\r\n }\r\n openThrottle();\r\n return fn?.(...args);\r\n }) as Fn;\r\n\r\n /** 移除时销毁定时器 */\r\n onBeforeUnmount(() => {\r\n closeThrottle();\r\n });\r\n\r\n return {\r\n throttleOpen,\r\n throttleFn,\r\n openThrottle,\r\n closeThrottle,\r\n };\r\n}\r\n\r\nexport type UseThrottleControlReturn = ReturnType<typeof useThrottleControl>;\r\n"],"names":["useThrottleControl","ms","fn","throttleOpen","ref","runningTimer","openThrottle","closeThrottle","timer","throttleFn","args","onBeforeUnmount"],"mappings":";AASgB,SAAAA,EAAqCC,IAAa,KAAKC,GAAS;AAExE,QAAAC,IAAeC,EAAI,EAAK;AAE1B,MAAAC;AAGJ,WAASC,IAAe;AACR,WAAAC,KACdJ,EAAa,QAAQ,IACrBE,IAAe,WAAW,MAAM;AAChB,MAAAE;OACbN,CAAE,GACEI;AAAA,EACT;AAGA,WAASE,EAAcC,GAAwB;AAEzC,KAAA,CAACA,KAASA,MAAUH,OACtBF,EAAa,QAAQ,IACjBE,MACF,aAAaA,CAAY,GACVA,IAAA;AAAA,EAGrB;AAGM,QAAAI,IAAc,IAAIC,MAAgB;AAEtC,QAAI,CAAAP,EAAa;AAGJ,aAAAG,KACNJ,KAAA,gBAAAA,EAAK,GAAGQ;AAAA,EAAI;AAIrB,SAAAC,EAAgB,MAAM;AACN,IAAAJ;EAAA,CACf,GAEM;AAAA,IACL,cAAAJ;AAAA,IACA,YAAAM;AAAA,IACA,cAAAH;AAAA,IACA,eAAAC;AAAA,EAAA;AAEJ;"}
|
package/es/index.mjs
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
import { MtExpandBox as
|
|
1
|
+
import { MtExpandBox as t } from "./components/expand-box/index.mjs";
|
|
2
|
+
import { useThrottleControl as x } from "./hooks/use-throttle-control/index.mjs";
|
|
2
3
|
export {
|
|
3
|
-
|
|
4
|
+
t as MtExpandBox,
|
|
5
|
+
x as useThrottleControl
|
|
4
6
|
};
|
|
5
7
|
//# sourceMappingURL=index.mjs.map
|
package/es/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
|
|
@@ -1,20 +1,8 @@
|
|
|
1
1
|
export declare const MtExpandBox: {
|
|
2
|
-
new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{
|
|
3
|
-
"onUpdate:open"?: ((open: boolean) => any) | undefined;
|
|
4
|
-
onChange?: ((value: boolean) => any) | undefined;
|
|
5
|
-
}>, {
|
|
6
|
-
isOutRange: import('vue').ComputedRef<boolean>;
|
|
7
|
-
hasExtendMore: import('vue').Ref<boolean, boolean>;
|
|
8
|
-
changeExtendMore: (value: boolean) => void;
|
|
9
|
-
toggleExtendMore: () => void;
|
|
10
|
-
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
11
|
-
"update:open": (open: boolean) => any;
|
|
12
|
-
change: (value: boolean) => any;
|
|
13
|
-
}, import('vue').PublicProps, {
|
|
2
|
+
new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').PublicProps, {
|
|
14
3
|
open: boolean;
|
|
15
4
|
targetRange: number;
|
|
16
|
-
transitionTime:
|
|
17
|
-
placement: "top" | "bottom";
|
|
5
|
+
transitionTime: number;
|
|
18
6
|
}, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
|
|
19
7
|
P: {};
|
|
20
8
|
B: {};
|
|
@@ -22,70 +10,23 @@ export declare const MtExpandBox: {
|
|
|
22
10
|
C: {};
|
|
23
11
|
M: {};
|
|
24
12
|
Defaults: {};
|
|
25
|
-
}, Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{
|
|
26
|
-
"onUpdate:open"?: ((open: boolean) => any) | undefined;
|
|
27
|
-
onChange?: ((value: boolean) => any) | undefined;
|
|
28
|
-
}>, {
|
|
29
|
-
isOutRange: import('vue').ComputedRef<boolean>;
|
|
30
|
-
hasExtendMore: import('vue').Ref<boolean, boolean>;
|
|
31
|
-
changeExtendMore: (value: boolean) => void;
|
|
32
|
-
toggleExtendMore: () => void;
|
|
33
|
-
}, {}, {}, {}, {
|
|
13
|
+
}, Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{}>, {}, {}, {}, {}, {
|
|
34
14
|
open: boolean;
|
|
35
15
|
targetRange: number;
|
|
36
|
-
transitionTime:
|
|
37
|
-
placement: "top" | "bottom";
|
|
16
|
+
transitionTime: number;
|
|
38
17
|
}>;
|
|
39
18
|
__isFragment?: never;
|
|
40
19
|
__isTeleport?: never;
|
|
41
20
|
__isSuspense?: never;
|
|
42
|
-
} & import('vue').ComponentOptionsBase<Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{
|
|
43
|
-
"onUpdate:open"?: ((open: boolean) => any) | undefined;
|
|
44
|
-
onChange?: ((value: boolean) => any) | undefined;
|
|
45
|
-
}>, {
|
|
46
|
-
isOutRange: import('vue').ComputedRef<boolean>;
|
|
47
|
-
hasExtendMore: import('vue').Ref<boolean, boolean>;
|
|
48
|
-
changeExtendMore: (value: boolean) => void;
|
|
49
|
-
toggleExtendMore: () => void;
|
|
50
|
-
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
51
|
-
"update:open": (open: boolean) => any;
|
|
52
|
-
change: (value: boolean) => any;
|
|
53
|
-
}, string, {
|
|
21
|
+
} & import('vue').ComponentOptionsBase<Readonly<import('./src/expand-box').ExpandBoxProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {
|
|
54
22
|
open: boolean;
|
|
55
23
|
targetRange: number;
|
|
56
|
-
transitionTime:
|
|
57
|
-
placement: "top" | "bottom";
|
|
24
|
+
transitionTime: number;
|
|
58
25
|
}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
|
|
59
26
|
$slots: {
|
|
60
|
-
|
|
61
|
-
|
|
27
|
+
default?(_: {
|
|
28
|
+
open: boolean;
|
|
62
29
|
isOutRange: boolean;
|
|
63
|
-
toggleExtendMore: () => void;
|
|
64
|
-
}): any;
|
|
65
|
-
content?(_: {
|
|
66
|
-
hasExtendMore: boolean;
|
|
67
|
-
isOutRange: boolean;
|
|
68
|
-
toggleExtendMore: () => void;
|
|
69
|
-
}): any;
|
|
70
|
-
custom?(_: {
|
|
71
|
-
hasExtendMore: boolean;
|
|
72
|
-
isOutRange: boolean;
|
|
73
|
-
toggleExtendMore: () => void;
|
|
74
|
-
}): any;
|
|
75
|
-
before?(_: {
|
|
76
|
-
hasExtendMore: boolean;
|
|
77
|
-
isOutRange: boolean;
|
|
78
|
-
toggleExtendMore: () => void;
|
|
79
|
-
}): any;
|
|
80
|
-
button?(_: {
|
|
81
|
-
hasExtendMore: boolean;
|
|
82
|
-
isOutRange: boolean;
|
|
83
|
-
toggleExtendMore: () => void;
|
|
84
|
-
}): any;
|
|
85
|
-
after?(_: {
|
|
86
|
-
hasExtendMore: boolean;
|
|
87
|
-
isOutRange: boolean;
|
|
88
|
-
toggleExtendMore: () => void;
|
|
89
30
|
}): any;
|
|
90
31
|
};
|
|
91
32
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
.mt-expand-box[data-v-c6fd30b0]{overflow:hidden}.mt-expand-transition[data-v-c6fd30b0]{transition:height var(--6beda65b) ease-in-out}
|
|
@@ -1,19 +1,8 @@
|
|
|
1
|
-
import { CSSProperties } from 'vue';
|
|
2
1
|
export interface ExpandBoxProps {
|
|
3
|
-
/**
|
|
2
|
+
/** 控制是否展开 */
|
|
4
3
|
open?: boolean;
|
|
5
4
|
/** 达到可调整的目标范围(px) */
|
|
6
5
|
targetRange?: number;
|
|
7
|
-
/** 过渡时间 */
|
|
8
|
-
transitionTime?:
|
|
9
|
-
/** 展开按钮样式 */
|
|
10
|
-
buttonStyle?: CSSProperties;
|
|
11
|
-
/** 展开的位置 */
|
|
12
|
-
placement?: 'top' | 'bottom';
|
|
13
|
-
}
|
|
14
|
-
export interface ExpandBoxEmits {
|
|
15
|
-
/** open绑定修改 */
|
|
16
|
-
(e: 'update:open', open: boolean): void;
|
|
17
|
-
/** 展开状态变更 */
|
|
18
|
-
(e: 'change', value: boolean): void;
|
|
6
|
+
/** 过渡时间(ms) */
|
|
7
|
+
transitionTime?: number;
|
|
19
8
|
}
|
|
@@ -1,39 +1,9 @@
|
|
|
1
1
|
import { ExpandBoxProps } from './expand-box';
|
|
2
|
-
/** 修改是否展开更多 */
|
|
3
|
-
declare function changeExtendMore(value: boolean): void;
|
|
4
|
-
/** 切换是否展开更多 */
|
|
5
|
-
declare function toggleExtendMore(): void;
|
|
6
2
|
declare function __VLS_template(): {
|
|
7
3
|
slots: {
|
|
8
|
-
|
|
9
|
-
|
|
4
|
+
default?(_: {
|
|
5
|
+
open: boolean;
|
|
10
6
|
isOutRange: boolean;
|
|
11
|
-
toggleExtendMore: typeof toggleExtendMore;
|
|
12
|
-
}): any;
|
|
13
|
-
content?(_: {
|
|
14
|
-
hasExtendMore: boolean;
|
|
15
|
-
isOutRange: boolean;
|
|
16
|
-
toggleExtendMore: typeof toggleExtendMore;
|
|
17
|
-
}): any;
|
|
18
|
-
custom?(_: {
|
|
19
|
-
hasExtendMore: boolean;
|
|
20
|
-
isOutRange: boolean;
|
|
21
|
-
toggleExtendMore: typeof toggleExtendMore;
|
|
22
|
-
}): any;
|
|
23
|
-
before?(_: {
|
|
24
|
-
hasExtendMore: boolean;
|
|
25
|
-
isOutRange: boolean;
|
|
26
|
-
toggleExtendMore: typeof toggleExtendMore;
|
|
27
|
-
}): any;
|
|
28
|
-
button?(_: {
|
|
29
|
-
hasExtendMore: boolean;
|
|
30
|
-
isOutRange: boolean;
|
|
31
|
-
toggleExtendMore: typeof toggleExtendMore;
|
|
32
|
-
}): any;
|
|
33
|
-
after?(_: {
|
|
34
|
-
hasExtendMore: boolean;
|
|
35
|
-
isOutRange: boolean;
|
|
36
|
-
toggleExtendMore: typeof toggleExtendMore;
|
|
37
7
|
}): any;
|
|
38
8
|
};
|
|
39
9
|
refs: {
|
|
@@ -42,22 +12,10 @@ declare function __VLS_template(): {
|
|
|
42
12
|
attrs: Partial<{}>;
|
|
43
13
|
};
|
|
44
14
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
45
|
-
declare const __VLS_component: import('vue').DefineComponent<ExpandBoxProps, {
|
|
46
|
-
isOutRange: import('vue').ComputedRef<boolean>;
|
|
47
|
-
hasExtendMore: import('vue').Ref<boolean, boolean>;
|
|
48
|
-
changeExtendMore: typeof changeExtendMore;
|
|
49
|
-
toggleExtendMore: typeof toggleExtendMore;
|
|
50
|
-
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
51
|
-
"update:open": (open: boolean) => any;
|
|
52
|
-
change: (value: boolean) => any;
|
|
53
|
-
}, string, import('vue').PublicProps, Readonly<ExpandBoxProps> & Readonly<{
|
|
54
|
-
"onUpdate:open"?: ((open: boolean) => any) | undefined;
|
|
55
|
-
onChange?: ((value: boolean) => any) | undefined;
|
|
56
|
-
}>, {
|
|
15
|
+
declare const __VLS_component: import('vue').DefineComponent<ExpandBoxProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<ExpandBoxProps> & Readonly<{}>, {
|
|
57
16
|
open: boolean;
|
|
58
17
|
targetRange: number;
|
|
59
|
-
transitionTime:
|
|
60
|
-
placement: "top" | "bottom";
|
|
18
|
+
transitionTime: number;
|
|
61
19
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
62
20
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
63
21
|
export default _default;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./expand-box.vue2.js");;/* empty css */const t=require("../../../_virtual/_plugin-vue_export-helper.js"),u=t.default(e.default,[["__scopeId","data-v-
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./expand-box.vue2.js");;/* empty css */const t=require("../../../_virtual/_plugin-vue_export-helper.js"),u=t.default(e.default,[["__scopeId","data-v-c6fd30b0"]]);exports.default=u;
|
|
2
2
|
//# sourceMappingURL=expand-box.vue.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),c=require("@vueuse/core"),d=require("lodash-es"),p=e.defineComponent({__name:"expand-box",props:{open:{type:Boolean,default:!1},targetRange:{default:0},transitionTime:{default:200}},setup(i){e.useCssVars(t=>({"6beda65b":u.value}));const n=i,u=e.computed(()=>`${n.transitionTime}ms`),o=e.ref(0),s=e.computed(()=>o.value>n.targetRange),l=e.computed(()=>({height:`${!s.value||n.open?o.value:n.targetRange}px`})),a=e.ref(),r=d.debounce(()=>{var t;o.value=(t=a.value)==null?void 0:t.offsetHeight},n.transitionTime);return c.useResizeObserver(a,r),e.onMounted(()=>{r()}),(t,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["mt-expand-box",{"mt-expand-transition":!!t.transitionTime}]),style:e.normalizeStyle(l.value)},[e.createElementVNode("div",{ref_key:"contentRef",ref:a},[e.renderSlot(t.$slots,"default",{open:t.open,isOutRange:s.value},void 0,!0)],512)],6))}});exports.default=p;
|
|
2
2
|
//# sourceMappingURL=expand-box.vue2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"expand-box.vue2.js","sources":["../../../../../../packages/components/expand-box/src/expand-box.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type {
|
|
1
|
+
{"version":3,"file":"expand-box.vue2.js","sources":["../../../../../../packages/components/expand-box/src/expand-box.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type { ExpandBoxProps } from './expand-box';\r\nimport { useResizeObserver } from '@vueuse/core';\r\nimport { debounce } from 'lodash-es';\r\nimport { computed, onMounted, ref } from 'vue';\r\n\r\nconst props = withDefaults(defineProps<ExpandBoxProps>(), {\r\n open: false,\r\n targetRange: 0,\r\n transitionTime: 200,\r\n});\r\n\r\nconst transitionDuration = computed(() => `${props.transitionTime}ms`);\r\n\r\n/** 内容的范围 */\r\nconst contentRange = ref(0);\r\n\r\n/** 是否超出目标范围 */\r\nconst isOutRange = computed(() => contentRange.value > props.targetRange);\r\n\r\n/** 展开或收起后内容样式 */\r\nconst contentStyle = computed(() => {\r\n const size = !isOutRange.value || props.open ? contentRange.value : props.targetRange;\r\n return { height: `${size}px` };\r\n});\r\n\r\n/** 内容实例 */\r\nconst contentRef = ref();\r\n\r\n/** 获取内容实际范围 */\r\nconst getContentRange = debounce(() => {\r\n contentRange.value = contentRef.value?.offsetHeight;\r\n}, props.transitionTime);\r\n\r\n// 监听内容高度变化\r\nuseResizeObserver(contentRef, getContentRange);\r\n\r\n// 初始化内容\r\nonMounted(() => {\r\n getContentRange();\r\n});\r\n</script>\r\n\r\n<template>\r\n <div\r\n class=\"mt-expand-box\"\r\n :class=\"{ 'mt-expand-transition': !!transitionTime }\"\r\n :style=\"contentStyle\"\r\n >\r\n <div ref=\"contentRef\">\r\n <slot :open=\"open\" :is-out-range=\"isOutRange\" />\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n.mt-expand-box {\r\n overflow: hidden;\r\n}\r\n\r\n.mt-expand-transition {\r\n transition: height v-bind(transitionDuration) ease-in-out;\r\n}\r\n</style>\r\n"],"names":["props","__props","transitionDuration","computed","contentRange","ref","isOutRange","contentStyle","contentRef","getContentRange","debounce","_a","useResizeObserver","onMounted"],"mappings":"0WAMA,MAAMA,EAAQC,EAMRC,EAAqBC,EAAAA,SAAS,IAAM,GAAGH,EAAM,cAAc,IAAI,EAG/DI,EAAeC,MAAI,CAAC,EAGpBC,EAAaH,EAAAA,SAAS,IAAMC,EAAa,MAAQJ,EAAM,WAAW,EAGlEO,EAAeJ,EAAAA,SAAS,KAErB,CAAE,OAAQ,GADJ,CAACG,EAAW,OAASN,EAAM,KAAOI,EAAa,MAAQJ,EAAM,WAClD,IAAK,EAC9B,EAGKQ,EAAaH,EAAAA,MAGbI,EAAkBC,EAAAA,SAAS,IAAM,OACxBN,EAAA,OAAQO,EAAAH,EAAW,QAAX,YAAAG,EAAkB,YAAA,EACtCX,EAAM,cAAc,EAGvBY,OAAAA,oBAAkBJ,EAAYC,CAAe,EAG7CI,EAAAA,UAAU,IAAM,CACEJ,GAAA,CACjB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './use-throttle-control';
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
type AnyFn = (...args: any[]) => any;
|
|
2
|
+
/**
|
|
3
|
+
* 节流控制
|
|
4
|
+
* @param ms 节流时间(ms)
|
|
5
|
+
* @param fn 节流函数
|
|
6
|
+
*/
|
|
7
|
+
export declare function useThrottleControl<Fn extends AnyFn>(ms?: number, fn?: Fn): {
|
|
8
|
+
throttleOpen: import('vue').Ref<boolean, boolean>;
|
|
9
|
+
throttleFn: Fn;
|
|
10
|
+
openThrottle: () => NodeJS.Timeout;
|
|
11
|
+
closeThrottle: (timer?: NodeJS.Timeout) => void;
|
|
12
|
+
};
|
|
13
|
+
export type UseThrottleControlReturn = ReturnType<typeof useThrottleControl>;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("vue");function c(i=200,n){const t=l.ref(!1);let e;function u(){return o(),t.value=!0,e=setTimeout(()=>{o()},i),e}function o(r){(!r||r===e)&&(t.value=!1,e&&(clearTimeout(e),e=void 0))}const s=(...r)=>{if(!t.value)return u(),n==null?void 0:n(...r)};return l.onBeforeUnmount(()=>{o()}),{throttleOpen:t,throttleFn:s,openThrottle:u,closeThrottle:o}}exports.useThrottleControl=c;
|
|
2
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../../packages/hooks/use-throttle-control/index.ts"],"sourcesContent":["import { onBeforeUnmount, ref } from 'vue';\r\n\r\ntype AnyFn = (...args: any[]) => any;\r\n\r\n/**\r\n * 节流控制\r\n * @param ms 节流时间(ms)\r\n * @param fn 节流函数\r\n */\r\nexport function useThrottleControl<Fn extends AnyFn>(ms: number = 200, fn?: Fn) {\r\n /** 节流状态 */\r\n const throttleOpen = ref(false);\r\n /** 当前执行的定时器 */\r\n let runningTimer: NodeJS.Timeout | undefined;\r\n\r\n /** 开启节流，已在执行的会被覆盖 */\r\n function openThrottle() {\r\n closeThrottle();\r\n throttleOpen.value = true;\r\n runningTimer = setTimeout(() => {\r\n closeThrottle();\r\n }, ms);\r\n return runningTimer;\r\n }\r\n\r\n /** 关闭节流定时器 */\r\n function closeThrottle(timer?: NodeJS.Timeout) {\r\n // 如果有传入timer时，会判断是否为当前执行开启的定时器\r\n if (!timer || timer === runningTimer) {\r\n throttleOpen.value = false;\r\n if (runningTimer) {\r\n clearTimeout(runningTimer);\r\n runningTimer = undefined;\r\n }\r\n }\r\n }\r\n\r\n /** 节流控制方法 */\r\n const throttleFn = ((...args: any[]) => {\r\n // 节流状态开启中，不可重复执行\r\n if (throttleOpen.value) {\r\n return;\r\n }\r\n openThrottle();\r\n return fn?.(...args);\r\n }) as Fn;\r\n\r\n /** 移除时销毁定时器 */\r\n onBeforeUnmount(() => {\r\n closeThrottle();\r\n });\r\n\r\n return {\r\n throttleOpen,\r\n throttleFn,\r\n openThrottle,\r\n closeThrottle,\r\n };\r\n}\r\n\r\nexport type UseThrottleControlReturn = ReturnType<typeof useThrottleControl>;\r\n"],"names":["useThrottleControl","ms","fn","throttleOpen","ref","runningTimer","openThrottle","closeThrottle","timer","throttleFn","args","onBeforeUnmount"],"mappings":"uGASgB,SAAAA,EAAqCC,EAAa,IAAKC,EAAS,CAExE,MAAAC,EAAeC,MAAI,EAAK,EAE1B,IAAAC,EAGJ,SAASC,GAAe,CACR,OAAAC,IACdJ,EAAa,MAAQ,GACrBE,EAAe,WAAW,IAAM,CAChBE,KACbN,CAAE,EACEI,CACT,CAGA,SAASE,EAAcC,EAAwB,EAEzC,CAACA,GAASA,IAAUH,KACtBF,EAAa,MAAQ,GACjBE,IACF,aAAaA,CAAY,EACVA,EAAA,QAGrB,CAGM,MAAAI,EAAc,IAAIC,IAAgB,CAEtC,GAAI,CAAAP,EAAa,MAGJ,OAAAG,IACNJ,GAAA,YAAAA,EAAK,GAAGQ,EAAI,EAIrBC,OAAAA,EAAAA,gBAAgB,IAAM,CACNJ,GAAA,CACf,EAEM,CACL,aAAAJ,EACA,WAAAM,EACA,aAAAH,EACA,cAAAC,CAAA,CAEJ"}
|
package/lib/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./components/expand-box/index.js");exports.MtExpandBox=e.MtExpandBox;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./components/expand-box/index.js"),t=require("./hooks/use-throttle-control/index.js");exports.MtExpandBox=e.MtExpandBox;exports.useThrottleControl=t.useThrottleControl;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|