xdesign-vue-next
Version:
XDesign Component for vue-next
1 lines • 5.02 kB
Source Map (JSON)
{"version":3,"file":"hooks.mjs","sources":["../../src/drawer/hooks.ts"],"sourcesContent":["import { computed, ref } from 'vue';\nimport { Styles } from '../common';\nimport type { TdDrawerProps } from './type';\n\nexport const useDrag = (props: TdDrawerProps) => {\n // 以下为拖拽改变抽屉大小相关 可以抽成hooks\n const isSizeDragging = ref(false);\n const draggedSizeValue = ref<string>(null);\n\n const enableDrag = () => {\n // mousedown绑定mousemove和mouseup事件\n document.addEventListener('mouseup', handleMouseup, true);\n document.addEventListener('mousemove', handleMousemove, true);\n isSizeDragging.value = true;\n };\n\n const handleMouseup = () => {\n document.removeEventListener('mouseup', handleMouseup, true);\n document.removeEventListener('mousemove', handleMousemove, true);\n isSizeDragging.value = false;\n };\n\n const handleMousemove = (e: MouseEvent) => {\n // 鼠标移动时计算draggedSizeValue的值\n const { x, y } = e;\n const maxHeight = document.documentElement.clientHeight;\n const maxWidth = document.documentElement.clientWidth;\n const offsetHeight = 8;\n const offsetWidth = 8;\n\n if (isSizeDragging.value && props.sizeDraggable) {\n if (props.placement === 'right') {\n const moveLeft = Math.min(Math.max(maxWidth - x + offsetWidth, offsetWidth), maxWidth);\n draggedSizeValue.value = `${moveLeft}px`;\n }\n if (props.placement === 'left') {\n const moveRight = Math.min(Math.max(x + offsetWidth, offsetWidth), maxWidth);\n draggedSizeValue.value = `${moveRight}px`;\n }\n if (props.placement === 'top') {\n const moveBottom = Math.min(Math.max(y + offsetHeight, offsetHeight), maxHeight);\n draggedSizeValue.value = `${moveBottom}px`;\n }\n if (props.placement === 'bottom') {\n const moveTop = Math.min(Math.max(maxHeight - y + offsetHeight, offsetHeight), maxHeight);\n draggedSizeValue.value = `${moveTop}px`;\n }\n }\n };\n\n const draggableLineStyles = computed(() => {\n // 设置拖拽control的样式\n const isHorizontal = ['right', 'left'].includes(props.placement);\n const oppositeMap = {\n left: 'right',\n right: 'left',\n top: 'bottom',\n bottom: 'top',\n };\n return {\n zIndex: 1,\n position: 'absolute',\n background: 'transparent',\n [oppositeMap[props.placement]]: 0,\n width: isHorizontal ? '16px' : '100%',\n height: isHorizontal ? '100%' : '16px',\n cursor: isHorizontal ? 'col-resize' : 'row-resize',\n } as Styles;\n });\n\n return { draggedSizeValue, enableDrag, draggableLineStyles };\n};\n"],"names":["draggedSizeValue","left","right","top","bottom","zIndex","position","background","enableDrag","draggableLineStyles"],"mappings":"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"}