因为这个项目license问题无法开源,更多技术支持与服务请加入我的知识星球。
1、因为原先仿钉钉流程里不能进行鼠标拖动来查看流程,所以根据作者提供的信息进行修改,在hooks下增加下面文件useDraggableScroll.ts
javascript
import { ref, onMounted, onBeforeUnmount, type Ref } from 'vue'
export function useDraggableScroll(containerRef: Ref<HTMLElement | null>) {
const isDragging = ref(false);
let startX: number, startY: number;
let scrollLeft: number, scrollTop: number;
const onMouseDown = (e: MouseEvent) => {
if (!containerRef.value) return;
isDragging.value = true;
startX = e.pageX;
startY = e.pageY;
scrollLeft = containerRef.value.scrollLeft;
scrollTop = containerRef.value.scrollTop;
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
};
const onMouseMove = (e: MouseEvent) => {
if (!isDragging.value || !containerRef.value) return;
const deltaX = e.pageX - startX;
const deltaY = e.pageY - startY;
containerRef.value.scrollLeft = scrollLeft - deltaX;
containerRef.value.scrollTop = scrollTop - deltaY;
};
const onMouseUp = () => {
isDragging.value = false;
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
};
onMounted(() => {
containerRef.value?.addEventListener('mousedown', onMouseDown);
});
onBeforeUnmount(() => {
containerRef.value?.removeEventListener('mousedown', onMouseDown);
});
return {
isDragging,
};
}
2、在lowflow\flowDesign\index修改增加相应的操作
import { useDraggableScroll } from '@/views/lowflow/hooks/useDraggableScroll'
const designerContainerRef = ref<HTMLElement | null>(null)
useDraggableScroll(designerContainerRef);
<div class="designer-container cursor-default active:cursor-grabbing" ref="designerContainerRef">
designer-container {
--flow-bg-color: v-bind(bgColor);
position: relative;
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
overflow: auto;
background-color: var(--flow-bg-color);
padding: 80px 0;
3、ModelDesigner.vue的样式做下面的跳转,以便满足拖动等界面要求
javascript
.el-dialog.is-fullscreen.ddDialog {
overflow: hidden;
}
.ddDialog .el-dialog__body {
height: 95%;
overflow: auto;
}
4、效果图