UNPKG

various-ui

Version:

This is a test version of the Vue 3 component library

114 lines (111 loc) 3.96 kB
import { ref, nextTick, reactive, computed } from 'vue'; const useComposable = (define, emits) => { const refs = { visible: ref(false) }; const vars = { observer: void 0 }; const nodes = { slideway: ref(), container: ref() }; const methods = { //* 初始化函数 init: () => { if (!nodes.container.value) return; if (nodes.container.value.scrollHeight <= nodes.container.value.clientHeight) { return refs.visible.value = false; } refs.visible.value = true; nextTick(() => { var _a, _b; const doms = { bar: (_a = nodes.slideway.value) == null ? void 0 : _a.querySelector(".ui-simplebar-bar"), content: (_b = nodes.container.value) == null ? void 0 : _b.querySelector(".ui-simplebar-content"), container: nodes.container.value }; if (!doms.bar || !doms.content || !doms.container) return; else { doms.bar.style.height = doms.container.clientHeight / doms.content.clientHeight * doms.container.clientHeight + "px"; doms.bar.style.transform = `translateY(${methods.site(doms)}px)`; doms.container.onscroll = (ev) => { doms.bar.style.transform = `translateY(${methods.site(doms)}px)`; emits("scroll", ev); }; } }); }, //* 拖拽函数 drag: (ev) => { var _a, _b, _c; const doms = { bar: (_a = nodes.slideway.value) == null ? void 0 : _a.querySelector(".ui-simplebar-bar"), content: (_b = nodes.container.value) == null ? void 0 : _b.querySelector(".ui-simplebar-content"), container: nodes.container.value }; if (!doms.bar || !doms.content || !doms.container) return; else { ev.preventDefault(); } const result = { site: ev.clientY, offset: ((_c = doms.container) == null ? void 0 : _c.scrollTop) || 0 }; const offset = result.offset / doms.content.clientHeight * doms.container.clientHeight; const mouseup = () => { document.removeEventListener("mouseup", mouseup); document.removeEventListener("mousemove", mousemove); }; const mousemove = (event) => { var _a2; if (!nodes.slideway.value) return; else { (_a2 = nodes.container.value) == null ? void 0 : _a2.scrollTo({ top: doms.content.clientHeight * (offset + (event.clientY - result.site)) / nodes.slideway.value.clientHeight }); } }; document.addEventListener("mouseup", mouseup); document.addEventListener("mousemove", mousemove); }, //* 移动函数 move: (ev) => { var _a, _b; const node = (_a = nodes.container.value) == null ? void 0 : _a.querySelector(".ui-simplebar-content"); if (!node || !nodes.slideway.value) return; else { (_b = nodes.container.value) == null ? void 0 : _b.scrollTo({ top: ev.offsetY / nodes.slideway.value.clientHeight * node.clientHeight, behavior: "smooth" }); } }, //* 位置处理函数 site: (node) => { if (!nodes.container.value || !nodes.slideway.value) return; return Math.min( Math.max(nodes.container.value.scrollTop / node.content.clientHeight * nodes.slideway.value.clientHeight, 0), nodes.slideway.value.clientHeight - node.bar.offsetHeight ); } }; const binds = reactive({ bar: computed(() => { return { style: { borderWidth: `${define.spacing || 0}px` } }; }), container: computed(() => { if (!define.height) return {}; if (typeof define.height === "number") return { style: { "max-height": define.height + "px" } }; return { style: { "max-height": define.height } }; }) }); return { refs, vars, nodes, binds, methods }; }; export { useComposable }; //# sourceMappingURL=composable.mjs.map