西安网站建设建站系统,个人博客网页设计图片,厦门网站建设公司名单,深圳网页设计培训学校讲讲两个经典布局组件的实现 ① 布局容器组件 配置面板是给用户配置布局容器背景颜色等属性。这里我们不需要关注 定义文件 规定了组件类的类型、标签、图标、默认布局属性、主文件等等。
// index.js
import Container from ./container.vue;
class ContainerControl extends… 讲讲两个经典布局组件的实现 ① 布局容器组件 配置面板是给用户配置布局容器背景颜色等属性。这里我们不需要关注 定义文件 规定了组件类的类型、标签、图标、默认布局属性、主文件等等。
// index.js
import Container from ./container.vue;
class ContainerControl extends BaseControl {type container;label 布局容器;icon tc-icon-layout;...layout {w: 30,h: 15,minH: 8,};// 组件实现的主文件DashboardComponent Container;
}export default new ContainerControl(); 入口文件会通过一系列逻辑生成【类型枚举类】我们最后通过control[container].DashboardComponent找到主体文件生成组件。这些我们简单了解就好啦。
具体来看看container.vue文件。 组件主体
// container.vue
templatedrag-containerv-bindfieldPropsinChildComponent$emit(inChildComponent, $event)addhandleAdddeletehandleDeletedropsyncDataToStore(add, $event)drag-container-layoutv-bindfieldProps:layout.synclayout:fieldsfieldsresizedsyncDataToStore(size, $event)movedsyncDataToStore(location, $event)editsyncDataToStore(edit, $event)deletesyncDataToStore(delete, $event)selecthandleSelect//drag-container
/template 这里的drag-container其实长这样
// drag-container
templatedivdragenterdragenterdragoverdragoverdragleavedragleavedropdropslot //div
/template是不是很熟悉对就是上一章讲的包裹着组件的drag事件层。用来触发inChildComponent事件的。 drag-container-layout其实就是一个 grid-layout。有运行时和设计时两种情况设计时可以拖拽组件进去运行时只是纯展示
// drag-container-layout.vue
templategrid-layout:layout.synclayout:col-num60:row-height15:isDraggable!isRuntime:isResizable!isRuntime:useCssTransforms!isRuntimetemplate v-forlayoutItem in layout!-- 运行时 --componentv-ifisRuntime:isItem:keylayoutItem.iv-bindgetComponentProps(layoutItem)/!-- 设计时 --grid-itemv-else:keylayoutItem.iv-bindgetLayoutProps(layoutItem)moved$emit(moved, layoutItem)resized$emit(moved, layoutItem)mousedown.native.stophandlePointerDownmouseup.native.stophandlePointerUp($event, layoutItem.i)component:isgetComponent(layoutItem)v-bindgetComponentProps(layoutItem)deleteComponenthandleDelete({ i: $event })//grid-item/template/grid-layout
/template 添加组件 上一节我们已经将过点击添加到布局组件内所以这节主要展开讲讲拖拽。逻辑跟上一节会有一些不一样上一节主要还是为了方便理解。 拖拽组件进入布局组件内部时drag-container层首先响应。触发dragenter事件 /** name 进入-有效目标 **/dragenter() {if (this.limit) return;this.$emit(inChildComponent, true);} 当拖拽进来的组件是布局组件时this.limit为true。这里的业务逻辑是不允许多层嵌套所以在这里做了阻断。此时不会给外界传递inChildComponent事件仪表盘的gird-layout也不需要改变this.isInChildCom。这里跟上一节讲的不一样是因为vue-grid-layout这个组件本身不允许组件之间重叠组件是有碰撞体积的。所以即使它进入到布局组件内布局组件内不接管也会被插件阻拦。 同时触发dragover事件为了定位拖拽的组件在布局组件内的位置
** name 移动-有效目标 **/
dragover(e) {if (this.limit) return;e.preventDefault();e.dataTransfer.dropEffect copy;this._dragover(e);
}throttle(100, { trailing: false })
_dragover(e) {if (this.dragContext.clientX e.clientX this.dragContext.clientY e.clientY)return;// 时刻记录鼠标的位置this.dragContext.clientX e.clientX;this.dragContext.clientY e.clientY;this.updateInside(e);this.updateDrag(e);
}/** name 拖拽上下文用于记录鼠标位置 */
dragContext {clientX: 0,clientY: 0,
}; updateInside是为了在拖动的时候更新布局组件内的布局让拖动元素在布局组件内部形成占位符。这一点在之前几章我都没讲过是因为vue-grid-layout这个组件对拖拽效果已经做了很好的处理了此时加上拖拽时占位只不过是锦上添花的效果罢了。 /** name 判断拖动元素是否在拖动区域内是则添加一项(占位符)否则删除一项 **/updateInside(ev) {// 获取布局组件内部区域位置大小const rect this.$el.getBoundingClientRect();// 容错率const errorRate 10;// 判断拖动元素是否在拖动区域内const inside ev.clientX rect.left errorRate ev.clientX rect.right - errorRate ev.clientY rect.top errorRate ev.clientY rect.bottom - errorRate;if (this.dragLayout) {if (inside) {this.$emit(add, deepClone(this.dragLayout));} else {this.$emit(delete, deepClone(this.dragLayout));}}}add和delete最终指向是操作drag-container-layout.vue里的this.layout这个属性也就是布局容器内的布局add操作会查找this.layout是否重复存在这个拖拽元素。可以理解为dragover操控更新了布局容器内的布局而一旦dragleave则会 ①取消接管仪表盘layout层的拖拽事件。恢复到仪表盘layout层进行接管 ②更新布局组件内部 /** name 离开-有效目标 **/
dragleave(e) {if (this.limit) return;this.$emit(inChildComponent, false);this.updateInside(e);
} 那么最最最关键的一环无非是drop事件了。它的核心思路是把布局容器当前的layout里的draglayout拿出来将它的位置属性记录在生成的拖拽组件属性中。并抛出到vuex仓库里进行存储。如果失败也只需要删除视图层layout里的dragLayout组件罢了。 /** name 放置-有效目标 **/async drop() {if (this.limit) return;const dragLayout deepClone(this.dragLayout);try {let field createDashboardField(this.dragType);// 标记组件为子组件field.parentId this.field.pkId;// 布局field.widget.layout pick(dragLayout, x, y, w, h);// 添加到layoutthis.$emit(add,{...field.widget.layout,i: field.pkId,},dragLayout.i,);this.$emit(drop, field);} catch (e) {this.$emit(delete, dragLayout);throw e;}}
drag-container...dropsyncDataToStore(add, $event)/drag-container 这个syncDataToStore方法会吧数据同步到vuex仓库包括了新增/删除/变化。我们最后再讲。到这一步我们已经把视图层关于新增的步骤完成了。 删除组件
// drag-container.vue
/** name 删除 **/
handleDelete(layout) {this.$emit(delete, layout);
}// container.vue
drag-container-layout...deletesyncDataToStore(delete, $event)/ 放大缩小组件/ 改变位置 vue-grid-layout负责抛出
template v-forlayoutItem in layoutgrid-item...moved$emit(moved, layoutItem)resized$emit(sized, layoutItem).../grid-item
/template 这里很巧妙的运用了this.layout属性vue-grid-layout的官方示例用法是这样的 可以理解为这两个响应事件是返回了新的位置信息。而项目里的写法是利用了vue-grid-layout在moved或resized之后自身的this.layout也会随着改变里面的layout-item也会跟随动态变化所以直接把layout-item当做参数传出
// container.vuedrag-container-layoutv-bindfieldProps:layout.synclayout:fieldsfieldsresizedsyncDataToStore(size, $event)movedsyncDataToStore(location, $event)deletesyncDataToStore(delete, $event)/ 和添加组件一样视图层逻辑到此结束等待数据层处理 数据层处理 每个项目都有自己的处理方式到这里视图层已经完成了自己的使命把数据教辅给数据层进行存储变更。所以参考一下就行啦 /*** name 同步到store* param { String } type: 添加-add、删除-delete、大小变化-size、位置变化-moved* param { Object } value: field、layout**/async syncDataToStore(type, value) {this.updateFields(fields {const currentField fields.find(field field.pkId this.field.pkId);const currentWidget currentField.widget;if (type add) {// 布局组件里面存储普通组件的字段currentWidget.fields.push(value);} else if (type moved || type size) {// 移动会改变其他元素的位置, 所以整体要重复赋值x,yconst layoutMap generateMap(this.layout, i, layout layout);currentWidget.fields.forEach(field {field.widget.layout pick(layoutMap[field.pkId], x, y, w, h);});} else if (type delete) {const index currentWidget.fields.findIndex(item item.pkId value.i,);currentWidget.fields.splice(index, 1);}return fields;});if (type delete) {await this.$nextTick();// 记得更新视图add就不用了因为在dragover的时候已经更新了this.layout了this.syncLayout();}} 特别注意的是移动位置或 更改大小需要更新容器内所有组件的位置因为可能会发生挤压或换行。 区分父容器和布局容器里的点击事件
grid-item
mousedown.native.stophandlePointerDown/grid-itemhandlePointerDown(ev) {// 防止和父级选中冲突setTimeout(() {this._pointerContext {x: ev.clientX,y: ev.clientY,};});} settimeout(fn,0)会让方法在在下一轮“事件循环”开始时执行。从而避免与父容器冲突。 ② 分页卡 跟布局容器一样只是数据存储多了一层嵌套
