UNPKG

various-ui

Version:

This is a test version of the Vue 3 component library

1 lines 10.6 kB
{"version":3,"file":"composable.mjs","sources":["../../../../../packages/components/simplebar/src/composable.ts"],"sourcesContent":["//* Vue\r\nimport type { SetupContext } from \"vue\";\r\nimport { ref, computed, reactive, nextTick } from \"vue\";\r\n//* 组件属性\r\nimport type { UiSimplebarEmits, UiSimplebarProps } from \"./component\";\r\n\r\nexport const useComposable = (define: UiSimplebarProps, emits: SetupContext<typeof UiSimplebarEmits>[\"emit\"]) => {\r\n //* 响应式数据\r\n const refs = {\r\n visible: ref<boolean>(false),\r\n };\r\n\r\n //* 数据\r\n const vars = {\r\n observer: <ResizeObserver | undefined>undefined,\r\n };\r\n\r\n //* 节点\r\n const nodes = {\r\n slideway: ref<HTMLElement>(),\r\n container: ref<HTMLElement>(),\r\n };\r\n\r\n //* 函数列表\r\n const methods = {\r\n //* 初始化函数\r\n init: () => {\r\n if (!nodes.container.value) return;\r\n if (nodes.container.value.scrollHeight <= nodes.container.value.clientHeight) {\r\n return (refs.visible.value = false);\r\n }\r\n\r\n refs.visible.value = true;\r\n nextTick(() => {\r\n //* 节点初始化\r\n const doms = {\r\n bar: nodes.slideway.value?.querySelector(\".ui-simplebar-bar\") as HTMLDivElement,\r\n content: nodes.container.value?.querySelector(\".ui-simplebar-content\") as HTMLDivElement,\r\n container: nodes.container.value as HTMLDivElement,\r\n };\r\n\r\n //* 检测是否满足运行条件\r\n if (!doms.bar || !doms.content || !doms.container) return;\r\n else {\r\n //* 位置初始化\r\n doms.bar.style.height = (doms.container.clientHeight / doms.content.clientHeight) * doms.container.clientHeight + \"px\";\r\n doms.bar.style.transform = `translateY(${methods.site(doms)}px)`;\r\n //* 绑定滚动事件\r\n doms.container.onscroll = (ev: Event) => {\r\n //* 设置滚动位置\r\n doms.bar.style.transform = `translateY(${methods.site(doms)}px)`;\r\n //* 响应滚动事件\r\n emits(\"scroll\", ev);\r\n };\r\n }\r\n });\r\n },\r\n\r\n //* 拖拽函数\r\n drag: (ev: MouseEvent) => {\r\n //* 节点初始化\r\n const doms = {\r\n bar: nodes.slideway.value?.querySelector(\".ui-simplebar-bar\") as HTMLDivElement,\r\n content: nodes.container.value?.querySelector(\".ui-simplebar-content\") as HTMLDivElement,\r\n container: nodes.container.value as HTMLDivElement,\r\n };\r\n\r\n //* 检测是否满足运行条件\r\n if (!doms.bar || !doms.content || !doms.container) return;\r\n else {\r\n ev.preventDefault(); //* 禁用鼠标选择功能\r\n }\r\n\r\n //* 数据初始化\r\n const result = { site: ev.clientY, offset: doms.container?.scrollTop || 0 };\r\n const offset = (result.offset / doms.content.clientHeight) * doms.container.clientHeight;\r\n //* 事件回调(抬起)\r\n const mouseup = () => {\r\n document.removeEventListener(\"mouseup\", mouseup);\r\n document.removeEventListener(\"mousemove\", mousemove);\r\n };\r\n\r\n //* 事件回调(移动)\r\n const mousemove = (event: MouseEvent) => {\r\n if (!nodes.slideway.value) return;\r\n else {\r\n //* 位置设置\r\n nodes.container.value?.scrollTo({\r\n top: (doms.content.clientHeight * (offset + (event.clientY - result.site))) / nodes.slideway.value.clientHeight,\r\n });\r\n }\r\n };\r\n\r\n document.addEventListener(\"mouseup\", mouseup);\r\n document.addEventListener(\"mousemove\", mousemove);\r\n },\r\n\r\n //* 移动函数\r\n move: (ev: MouseEvent) => {\r\n //* 节点初始化\r\n const node = nodes.container.value?.querySelector(\".ui-simplebar-content\") as HTMLDivElement;\r\n //* 检测是否满足运行条件\r\n if (!node || !nodes.slideway.value) return;\r\n else {\r\n nodes.container.value?.scrollTo({\r\n top: (ev.offsetY / nodes.slideway.value.clientHeight) * node.clientHeight,\r\n behavior: \"smooth\",\r\n });\r\n }\r\n },\r\n\r\n //* 位置处理函数\r\n site: (node: { bar: HTMLElement; content: HTMLElement }) => {\r\n if (!nodes.container.value || !nodes.slideway.value) return;\r\n return Math.min(\r\n Math.max((nodes.container.value.scrollTop / node.content.clientHeight) * nodes.slideway.value.clientHeight, 0),\r\n nodes.slideway.value.clientHeight - node.bar.offsetHeight\r\n );\r\n },\r\n };\r\n\r\n //* 属性列表\r\n const binds = reactive({\r\n bar: computed(() => {\r\n return {\r\n style: {\r\n borderWidth: `${define.spacing || 0}px`,\r\n },\r\n };\r\n }),\r\n\r\n container: computed(() => {\r\n if (!define.height) return {};\r\n if (typeof define.height === \"number\") return { style: { \"max-height\": define.height + \"px\" } };\r\n return {\r\n style: {\r\n \"max-height\": define.height,\r\n },\r\n };\r\n }),\r\n });\r\n\r\n return { refs, vars, nodes, binds, methods };\r\n};\r\n"],"names":["_a"],"mappings":"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"}