wzw54180

前言 写 Vue 时，最容易踩的小坑之一，就是给 <template> 套一个 v-show。编辑器不报错，页面却“消失”了。很多人以为这是 bug，其实它只是 Vue 的底层设计在默默提醒：<tem

哈喽大家好，我是Jiaynn~ 今天想要分享的是关于前端项目规范以及部署上线的整体流程，主要包含： 🌈 eslint、prettier 📦 husky 🛡 git-cz ⚙️ 基于 nginx 部署的

前端开发趋势总是在不断发展，有些趋势会长期流行。本文是 2023 年将突出的一些前端开发趋势，分享给大家~

相信有很多这样的兄弟，学了 Vue3 的各种 API和新特性 ，但公司项目依然使用的是 Vue2 ，也不知道自己的水平能否上手 Vue3 项目。今天就把实战过程中遇到的十个场景分享给大家。

LogicFlow 脱胎于滴滴技术团队在客服业务下的实践，是由智能中台—体验平台研发的一款流程可视化的前端框架，提供了一系列流程图交互、编辑所必需的功能和灵活的节点自定义、插件等拓展能力，方便我们快速在业务系统内满足类流程图编辑器的需求。目前，LogicFlow 已经在公司内外…

注册的组件对象放在componentList（用于渲染组件菜单）和componentMap(方便查找)里。 在 mousemove 中通过计算鼠标 按下时位置 与 当前位置 的差值，计算出最新的选中的组件坐标。

最终效果实现功能：主页面结构：左侧可选组件列表、中间容器画布、右侧编辑组件定义好的属性从菜单拖拽组件到容器；单选、多选；容器内的组件可以拖拽移动位置；组件拖拽调整宽高；组件拖拽贴边，显示辅助线；操作栏

定义一个变量type，用于触发拖拽事件开始的时候，确定当前拖拽元素是哪种类型，比如：产品、广告图... 即松开鼠标、或离开释放区域，则恢复默认状态。 上方的计算规则，用于判断元素是否为拖拽元素。 页面的显示方式，拖拽的时候只显示组件名，释放之后才恢复正常显示内容。 其实并不复杂…

建议结合源码一起阅读，效果更好（这个 DEMO 使用的是 Vue 技术栈）。 1. 编辑器 先来看一下页面的整体结构。 这一节要讲的编辑器其实就是中间的画布。它的作用是：当从左边组件列表拖拽出一个组件放到画布中时，画布要把这个组件渲染出来。 用一个数组 componentDat…