You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.2 KiB
TypeScript
87 lines
2.2 KiB
TypeScript
export function useDragLine(siderRef: Ref<any>, dragBarRef: Ref<any>, mix = false) {
|
|
const { getMiniWidthNumber, getCollapsed, setMenuSetting } = useMenuSetting()
|
|
|
|
function getEl(elRef: Ref<ElRef | ComponentRef>): any {
|
|
const el = unref(elRef)
|
|
if (!el) {
|
|
return null
|
|
}
|
|
if (Reflect.has(el, '$el')) {
|
|
return (unref(elRef) as ComponentRef)?.$el
|
|
}
|
|
return unref(elRef)
|
|
}
|
|
|
|
function handleMouseMove(ele: HTMLElement, wrap: HTMLElement, clientX: number) {
|
|
document.onmousemove = function (innerE) {
|
|
let iT = (ele as any).left + (innerE.clientX - clientX)
|
|
innerE = innerE || window.event
|
|
const maxT = 800
|
|
const minT = unref(getMiniWidthNumber)
|
|
iT < 0 && (iT = 0)
|
|
iT > maxT && (iT = maxT)
|
|
iT < minT && (iT = minT)
|
|
ele.style.left = wrap.style.width = `${iT}px`
|
|
return false
|
|
}
|
|
}
|
|
|
|
// Drag and drop in the menu area-release the mouse
|
|
function removeMouseup(ele: any) {
|
|
const wrap = getEl(siderRef)
|
|
document.onmouseup = function () {
|
|
document.onmousemove = null
|
|
document.onmouseup = null
|
|
wrap.style.transition = 'width 0.2s'
|
|
const width = Number.parseInt(wrap.style.width)
|
|
|
|
if (!mix) {
|
|
const miniWidth = unref(getMiniWidthNumber)
|
|
if (!unref(getCollapsed)) {
|
|
width > miniWidth + 20
|
|
? setMenuSetting({ menuWidth: width })
|
|
: setMenuSetting({ collapsed: true })
|
|
}
|
|
else {
|
|
width > miniWidth && setMenuSetting({ collapsed: false, menuWidth: width })
|
|
}
|
|
}
|
|
else {
|
|
setMenuSetting({ menuWidth: width })
|
|
}
|
|
|
|
ele.releaseCapture?.()
|
|
}
|
|
}
|
|
|
|
function changeWrapWidth() {
|
|
const ele = getEl(dragBarRef)
|
|
if (!ele) {
|
|
return
|
|
}
|
|
const wrap = getEl(siderRef)
|
|
if (!wrap) {
|
|
return
|
|
}
|
|
|
|
ele.onmousedown = (e: any) => {
|
|
wrap.style.transition = 'unset'
|
|
const clientX = e?.clientX
|
|
ele.left = ele.offsetLeft
|
|
handleMouseMove(ele, wrap, clientX)
|
|
removeMouseup(ele)
|
|
ele.setCapture?.()
|
|
return false
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
const exec = useDebounceFn(changeWrapWidth, 80)
|
|
exec()
|
|
})
|
|
})
|
|
|
|
return {}
|
|
}
|