企业网站源码 可去版权武汉seo优化
需求
要做一个仪表盘系统，要求有：
① 设计功能（包括布局、大小、排列）
② 预览功能
③ 运行功能
布局选择
做编辑器，肯定要先选择布局。
前端有几种常用布局。
静态布局
也叫文档布局。默认的网页形式是文档流的形式，一个网页就像是一条条从左流向右的河流。在文档中有两种元素，内联元素（display:inline）和块级元素（display:block）。内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。而块级元素则会独占一行，按照从上往下的方式布局。内联元素的宽度和高度默认都被内容撑开。
这肯定不适合用来做编辑器。
浮动布局
浮动元素会脱离文档流并浮动到左侧或右侧。这时候其他的周围内容就会在这个被设置浮动 (float) 的元素周围环绕。
这种肯定也不行。因为元素只能向左向右浮动。并且周围元素会围绕浮动元素旋转，并不会脱离文档流，也就是无法自定义其位置。
定位布局
通过调整position这个CSS属性的值来实现（absolute/relative/fixed/static(绝对/相对/固定/静态(默认))四个值）。
static为静态布局，遵循默认文档流。这没什么好说的。
absolute绝对定位：元素会脱离文档流，通过TBLR（ top,bottom,left,right） 定位，会选取最近的一个有定位设置的父级对象（非static）进行绝对定位，如果没有设置定位属性的父级对象，则将以body坐标原点进行定位。绝对定位的元素不会占有空间，也不会影响别的元素。
relative相对定位：对象不可层叠、不脱离文档流，参考自身静态位置通过 TBLR定位。设置了TBLR之后，元素位置会发生偏移，但仍然占有原来的位置，且不会影响别的元素，而是覆盖在上方。相对定位与绝对定位的区别就是相对定位是只占有原来的空间，而绝对定位不占有空间。
fixed固定定位：顾名思义，固定定位就是固定在一个位置，不会随着页面滚动而改变位置的定位方式，像常见的页面上的小广告，或者右下角的返回页面顶部等等。
如果要做编辑器，fixed（只有单页了）和static肯定不行。relative不脱离文档流，也不行。那么只能以页面为定位的absolute绝对定位了。这么做有几个缺点：
第一，每个元素都需要精准的TBLR值。这是很麻烦的。甚至需要去计算。
第二：拖拽放大缩小元素的时候，会改变其自身的TBLR值。并且可能会盖到其他元素上面去。我们需要的效果是像果冻一样挤压其他元素。使其挪到后面或下面。
瀑布布局
视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
瀑布流的实现方法决定了它的元素排序，具体请看我这篇推文。
瀑布流布局的实现_AI3D_WebEngineer的博客-CSDN博客瀑布流布局视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部 瀑布流的实现方法决定了它的元素排序，具体请看我这篇推文。https://blog.csdn.net/weixin_42274805/article/details/132981042
flex布局
弹性盒模型。也是纯CSS布局。具体可以看廖雪峰的Flex 布局教程：语法篇 - 阮一峰的网络日志
https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
但是做编辑器是不能选择flex布局的，为什么？请看下面Grid布局的介绍
Grid布局
网络布局，目前唯一一种 CSS 二维布局。擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。
与flex布局的区别：flex 布局是一维布局，Grid 布局是二维布局。flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。
布局实现
<body><div class="container"><div class="item"><img src="img/bg1.png" alt="" /></div><div class="item"><img src="img/bg2.png" alt="" /></div><div class="item"><img src="img/bg3.png" alt="" /></div><div class="item"><img src="img/bg4.png" alt="" /></div><div class="item"><img src="img/bg5.png" alt="" /></div><div class="item"><img src="img/bg6.png" alt="" /></div></div>
</body>此时我们只需要对container这个父容器添加grid属性就好：
<style>.container {/* 声明一个容器 */display: grid;/* 声明列的宽度 */grid-template-columns: repeat(3, 200px);/* 声明行间距和列间距 */grid-gap: 20px;/* 声明行的高度 */grid-template-rows: 100px 200px;}.item img {width: 100%;height: 100%;}
</style>grid-template-columns: repeat(3, 200px);
这里的2是分为3列的意思，200px是列宽
容器
我们通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。一旦我们这样做，这个元素的所有直系子元素将成为网格项目。比如上面 .container所在的元素为一个网格容器，其直系子元素将成为网格项目。
网格轨道
grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。容器内部的水平区域称为行，垂直区域称为列。
网格单元
一个网格单元是在一个网格元素中最小的单位
1 2 3 4 5 6 各是一个网络单元
网格线
划分网格的线，称为"网格线"。这对我们来说是不可见的。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。m 列有 m + 1 根垂直的网格线，n 行有 n + 1 跟水平网格线。
详细的语法请看：
最强大的 CSS 布局 —— Grid 布局 - 掘金Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。号称是最强大的的 CSS 布局方案，是目前唯一一种 CSS 二维布局。利用 Grid 布局，我们可以轻松实现类似下图布局，演示地址 讲到布局，…https://juejin.cn/post/6854573220306255880
我的选择
Grid布局是最佳选择。因为二维布局提供的网格概念，使得元素的大小和位置可以被合理配置。但是Grid布局的兼容性很一般。考虑到有拖拽和放大缩小功能，且是基于Vue2的项目，我选择了一个网格（栅格）拖拽布局库vue-grid-layout 。他可以完美地实现自定义布局功能。
编辑器页面
这是一个完整的编辑器页面。除开上部的公共导航栏之外。编辑器由左边的组件栏和右边的设计器组成。
组件的设计器设计为弹窗模式。
拖拽、移动的浮窗效果。
dashboard-design.vue：编辑器外壳，通过插槽来插入页面模块
// dashboard-design.vue
<template><div :class="$style.design"><global-header :class="$style.header"><template slot="center"><slot name="header-center" /></template></global-header><slot /></div>
</template>index.vue:仪表盘编辑器文件
// index.vue<template><dashboard-design-layout:id="$route.params.id">// 头部<dashboard-design-header-centerslot="header-center"/><template><divid="dashboardContent">// 左边的组件列表<a-card:class="$style.controls"><control-list :dragType.sync="dragType" @add="handleClickAddField" /></a-card>// 右边设计器区域<a-card :class="$style.main">....</a-card></div></dashboard-design-layout>
</template>此时一个简单的编辑机页面结构就出来了，紧接着我们需要给它添加CSS样式
设计器概览
<a-card :class="$style.main">// 按钮<div :class="$style.action"><div :class="$style.actionLeft"><a-button type="link" @click="handlePreview"><x-icon type="tc-icon-search-square" /><span>预览</span></a-button></div><div :class="$style.actionRight"><async-button type="primary" :click="validateAndSave">保存</async-button></div></div>// 设计器<drag-containerref="container":fields="fields":dragType.sync="dragType":selectedField="selectedField":dashboard="form":initFieldStyle="initFieldStyle"@add="handleAdd"@edit="handleEdit"@delete="handleDelete"@select="selectField"/>
</a-card>
我们关注drag-container.vue是怎么样的实现，它一定会有的两个功能：
① 能展示现有的设计布局
② 能自适应拖拽进来的元素，并允许用户自定义它的位置和大小
让我们看看它的实现：
// drag-container.vue
<template><divid="dashboardLayout":style="styleCSSVariable"><background :background="themeBackground"><grid-layoutref="layout":class="$style.layout":layout.sync="layout":colNum="60":rowHeight="15"@dragover.native="handleDrag"@dragleave.native="handleDragLeave"@drop.native="handleDrop">....</grid-layout></background></div>
</template>可以看到，根元素这里使用了一个名为styleCSSVariable的CSS集。这里的实现是：
get styleCSSVariable() {return createDashboardCSS(this.dashboard.setting.style);
}这里可以根据当前仪表盘的用户设置风格（如“暗黑”、“科技”、“酷炫”）进行css样式管理。return了诸如这些设置：
return {// 文字颜色'--font': '#cccccc','--font-sub': '#999999','--font-info': '#666666',// 辅助文字'--font-color-secondary': '#aaaaaa',// 提示性文字'--font-color-info': '#ff2d2d','--font-active-light': '#ffffff',// 删除按钮/文字'--delete': '#fe5959',// 警示色'--warning': '#ff9900',// 操作成功'--success': '#19be6b'....
}
可以看到设计器的元素style样式上绑定了一堆颜色定义。这其实就是CSS中的var()函数用法。详情可以看我这篇推文。
CSS的var()函数用法与JS获取css函数变量值的方法_AI3D_WebEngineer的博客-CSDN博客https://blog.csdn.net/weixin_42274805/article/details/133135688?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22133135688%22%2C%22source%22%3A%22weixin_42274805%22%7D 往下看，这里面套了个background的背景板。紧接着是我们的主角。来自于vue-grid-layout插件的grid-layout画布组件。
colNum：画布总共设计为60列
rowHeight：每行高度
:layout.sync="layout" 这里传入的是当前的布局信息
@dragover.native 这里响应的是原生的dragover 事件。拖拉到当前节点上方时，在当前节点上持续触发（相隔几百毫秒）
@dragleave.native
拖拉操作离开当前节点范围时，在当前节点上触发@drop.native drag 被拖拉的节点或选中的文本，释放到目标节点时，在目标节点上触发
这里为什么要设置三个事件呢？drop响应的是用户放手的事件，dragleave是用户手势离开设计器的时候响应，dragover是用户的手势在设计器里持续响应（刷新状态）。而我们知道，drag原生事件并不只三个：
dragstart：用户开始拖拉时，在被拖拉的节点上触发。
dragend：拖拉结束时（释放鼠标键或按下 ESC 键）在被拖拉的节点上触发。
dragenter：拖拉进入当前节点时，在当前节点上触发一次，该事件的target属性是当前节点。
但这些对于我们设计器来说并无作用。
设计器拖拽部分（一）
大概明白了设计器的拖拽设计，紧接着我们来看最关键的数据结构。 
其实很简单，我们只需要传入一个layout-item数组到layout-grid，它就可以正常响应渲染。哪怕数组是乱序的。也就是说layout-grid将严格按照每个layout-item的x/y/w/h进行计算布局
layout-grid是不关注item的max/min-h/w属性的。因为这个事layout-item自己的事情。也就是说layout-grid甚至只是个容器。它接受的item数组是什么样，就会展示什么样。同时它响应上面的拖拽事件，方便我们生成每个layout-item数据。
直接先看@drop.native="handleDrop"部分
/** @name 拖动放置时 **/async handleDrop() {if (this.isInChildCom) return; // 进入子元素范围则无需触发try {let field = createDashboardField(this.dragType);field.widget.layout = pick(this.dragLayout, 'x', 'y', 'w', 'h');this.layout.splice(this.dragLayoutIndex, 1, {...field.widget.layout,i: field.pkId,});this.$emit('add', field);} catch (e) {this.layout.splice(this.dragLayoutIndex, 1);throw e;}}/** @name 当前拖拽元素的layout **/dragLayout = null;/** @name 当前拖拽元素的index **/get dragLayoutIndex() {return this.layout.indexOf(this.dragLayout);}我把代码精简一下，大概是先创建一个拖拽组件的实例（谨慎地用try方法进行尝试，只要中途有抛错就把这个拖拽进来的元素切割掉）。紧接着更新layout。并把新增的组件实例抛出去（做数据存储）。
请注意，this.layout仅仅用于当前页面layout-grid的渲染。不参与数据存储。
编辑器概览
结合一下代码来看看：
// index.vue
<a-card><!-- 左侧组件库--><control-list :dragType.sync="dragType" @add="handleClickAddField" />
</a-card>
<a-card><!-- 左侧设计器--><drag-container:dragType.sync="dragType":selectedField="selectedField"/>
</a-card><script>..../** @name 左边栏拖动时的组件类型 **/dragType = null;
</script>这里用了sync传值的语法糖。让子组件能够通过emit修改父组件的值。
// control-list.vue<template><div :class="$style.controlList"><divv-for="control in group.list":key="control.type"@dragstart="handleDragStart(control.type, control.draggable)"@dragend="handleDragEnd(control.draggable)"><x-icon :type="control.icon" /><span>{{control.name}}</span></div></div>
</template>...@Prop() dragType;handleDragStart(type, draggable = true) {if (draggable) {this.$emit('update:dragType', type);}
}handleDragEnd(draggable = true) {if (draggable) {this.$emit('update:dragType', null);}
}
control-list.vue这里触发拖拽开始的事件就会emit一个有效的类型值给index.vue，如果拖拽停止就会emit一个空类型值给index。index再通过pro传参给drag-container，这里drag-container为什么也要用sync呢？因为当拖拽放置完成之后，drag-container会把类型值清空，以恢复起始的模式。
// drag-container.vue<template><grid-layout@dragover.native="handleDrag"@dragleave.native="handleDragLeave"@drop.native="handleDrop"><grid-itemv-for="layoutItem in layout":key="layoutItem.i"v-bind="getLayoutProps(layoutItem)"><dash-layout-item@inChildComponent="inChildComponent"><component:is="getComponent(layoutItem)"/><dash-layout-item>/></grid-item></grid-layout>
</template>@Prop() dragType;我们来看看这个dragType的作用是什么？
/** @name 拖动放置时 **/
async handleDrop() {...try {let field = createDashboardField(this.dragType);} catch {...} finally {this.$emit('update:dragType', null);}
}第一个作用，在拖拽放置的时候将组件类型传给创建方法。如果为null，则被捕获错误，回滚拖拽操作。不管成功与否，最后finally必须把父组件的dragType置为空以结束流程。
/** @name 左边栏拖动触发 **/@Watch('dragType')handleDragTypeChange(type) {this.isInChildCom = false; // 重新拖动，重置是否在现有组件内部的判断if (type) {// 生成默认的布局item属性this.dragLayout = {i: 'drag',...getDashboardLayoutByType(type),};} else {this.dragLayout = null;}}第二个作用，观察dragType值。并根据传入的组件类型为其生成默认的布局属性（x,y,w,h）之类。
再来看看
<grid-itemv-for="layoutItem in layout":key="layoutItem.i"v-bind="getLayoutProps(layoutItem)"
><dash-layout-item@inChildComponent="inChildComponent"><component :is="getComponent(layoutItem)"/><dash-layout-item>/>
</grid-item>这里为什么要套个dash-layout-item，就是为了监控拖拽元素是否已经进入到现有元素。
// dash-layout-item
<template><div@dragenter="dragenter"@dragleave="dragleave"><slot /></div>
</template><script>/** @name 进入-有效目标 **/
dragenter() {this.$emit('inChildComponent', true);
}/** @name 离开-有效目标 **/
dragleave(e) {...this.$emit('inChildComponent', false);
}</script>