基于Jeecgboot3.6.3的vue3版本的流程中仿钉钉流程的鼠标拖动功能支持

因为这个项目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、效果图

相关推荐
西凉河的葛三叔9 小时前
vue3+elementui-plus el-dialog全局配置点击空白处不关闭弹窗
前端·vue3·elementui-plus
xiaohuatu9 小时前
CSRF保护--laravel进阶篇
vue3·laravel·csrf
爱健身的小刘同学1 天前
H5页面在钉钉浏览器上动态修改标题
前端·钉钉
国通快递驿站2 天前
AntFlow 0.11.0版发布,增加springboot starter模块,一款设计上借鉴钉钉工作流的免费企业级审批流平台
spring boot·后端·钉钉
HelpLook HelpLook3 天前
降本增效新策略:对比飞书和钉钉,HelpLook如何更灵活管理知识库访客权限?
人工智能·aigc·钉钉·飞书·企业知识库·ai知识库·访问权限
女王の专属领地5 天前
深入浅出《钉钉AI》产品体验报告
人工智能·钉钉·语音识别·ai协同办公
da pai ge5 天前
zabbix搭建钉钉告警流程
钉钉·zabbix
Dark_programmer5 天前
钉钉小程序 - - - - - overflow无效?
小程序·钉钉
半度℃温热6 天前
ERROR TypeError: AutoImport is not a function
webpack·vue3·element-plus·插件版本·autoimport
肖老师xy6 天前
对接钉钉审批详情
钉钉