various-ui
Version:
This is a test version of the Vue 3 component library
114 lines (111 loc) • 3.96 kB
JavaScript
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