购物网站首页设计,旅游网站制作方法,姐姐直播tv,wordpress里添加字体文章目录 1、前言2、安装3、属性4、事件5、占位符样式修改6、案例 1、前言
vue-grid-layout是一个适用于vue的拖拽栅格布局库#xff0c;功能齐全#xff0c;适用于拖拽高度/宽度自由调节的布局需求#xff0c;本文将讲述一些常用参数和事件#xff0c;以及做一个同步拖拽… 文章目录 1、前言2、安装3、属性4、事件5、占位符样式修改6、案例 1、前言
vue-grid-layout是一个适用于vue的拖拽栅格布局库功能齐全适用于拖拽高度/宽度自由调节的布局需求本文将讲述一些常用参数和事件以及做一个同步拖拽的Demo。效果动态图如下 2、安装
vue2版本
npm install vue-grid-layout --savevue3版本
npm install vue-grid-layout3.0.0-beta1 --save3、属性
GridLayout 容器
属性名类型必填默认值描述layoutArray是-数据源每一项必须有i, x, y, w 和 h属性colNumInt否12列数rowHeightInt否150每行的高度像素maxRowsInt否Infinity最大行数marginArray是[10, 10]元素边距isDraggableBoolean否true是否可拖拽isResizableBoolean否true是否可调整大小isMirroredBoolean否false是否可镜像反转autoSizeBoolean否true是否自动调整大小verticalCompactBoolean否true布局是否垂直压缩preventCollisionBoolean否false防止碰撞为true则元素只能拖动至空白处useCssTransformsBoolean否true是否使用CSS属性 transition-property: transformresponsiveBoolean否false布局是否为响应式breakpointsBoolean否{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }为响应式布局设置断点colsBoolean否{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }设置每个断点对应的列数
GridItem 子项
属性名类型必填默认值描述istring是-子项IDxnumber是-元素位于第几列ynumber是-元素位于第几行wnumber是-初始宽度值必须为colNum的倍数hnumber是-初始高度值必须为rowHeight的倍数minWnumber否1元素最小宽度值必须为colNum的倍数如果w小于minW则minW的值会被w覆盖minHnumber否1元素最小高度值必须为rowHeight的倍数如果h小于minH则minH的值会被h覆盖maxWnumber否Infinity元素最大宽度值必须为colNum的倍数如果w大于maxW则maxW的值会被w覆盖maxHnumber否Infinity元素最大高度值必须为rowHeight的倍数如果h大于maxH则maxH的值会被h覆盖isDraggableBoolean否null是否可拖拽。如果值为null则取决于父容器isResizableBoolean否null是否可调整大小。如果值为null则取决于父容器staticBoolean否false是否为静态的无法拖拽、调整大小或被其他元素移动dragIgnoreFromstring否‘a, button’标识哪些子元素无法触发拖拽事件值为css-like选择器dragAllowFromstring否null标识哪些子元素可以触发拖拽事件值为css-like选择器如果值为null则表示所有子元素resizeIgnoreFromstring否‘a, button’标识哪些子元素无法触发调整大小的事件值为css-like选择器
4、事件
GridLayout 容器
事件名描述layoutCreatedEvent对应Vue生命周期的createdlayoutBeforeMountEvent对应Vue生命周期的beforeMountlayoutMountedEvent对应Vue生命周期的mountedlayoutReadyEvent当完成mount中的所有操作时生成的事件layoutUpdatedEvent布局更新或栅格元素的位置重新计算事件breakpointChangedEvent断点更改事件每次断点值由于窗口调整大小而改变
GridItem 子项
事件名描述moveEvent移动时的事件resizeEvent调整大小时的事件movedEvent移动后的事件resizedEvent调整大小后的事件containerResizedEvent栅格元素/栅格容器更改大小的事件浏览器窗口或其他
5、占位符样式修改
直接覆盖默认的class样式
.vue-grid-item.vue-grid-placeholder {background: red;opacity: 0.2;transition-duration: 100ms;z-index: 2;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;-o-user-select: none;user-select: none;
}.vue-grid-item.vue-grid-placeholder {background: green !important;
}6、案例
注本案例是按照vue3的写法
HTML
div classgrid_boxdiv classleftgrid-layoutv-model:layoutlayoutLeft:col-num4:row-height50:is-draggabletrue:is-resizabletrue:is-mirroredfalse:vertical-compacttrue:margin[10, 10]:use-css-transformstruerefgridLeftRefgrid-itemv-foritem in layoutLeft:xitem.x:yitem.y:witem.w:hitem.h:iitem.i:keyitem.iresizedhandleGridSyncmovedhandleGridSyncdiv classleft_layout_itemdiv classdel_btn clickdeleteGrid(item.i)删/divspan{{ item.i }}/span/div/grid-item/grid-layout/divdiv classrightgrid-layoutv-model:layoutlayoutRight:col-num4:row-height10:is-draggabletrue:is-resizabletrue:is-mirroredfalse:vertical-compacttrue:margin[10, 10]:use-css-transformstruerefgridRightRefgrid-item v-foritem in layoutRight :xitem.x :yitem.y :witem.w :hitem.h :iitem.i :keyitem.idiv classright_layout_item{{ item.i }}/div/grid-item/grid-layout/div
/div引入组件
import VueGridLayout from vue-grid-layout数据源
const gridLeftRef refany()
const gridRightRef refany()const layoutLeft ref([{ i: 1, x: 0, y: 0, w: 2, h: 2 },{ i: 2, x: 2, y: 0, w: 2, h: 2 },{ i: 3, x: 0, y: 0, w: 2, h: 2 },{ i: 4, x: 2, y: 0, w: 2, h: 2 }
])const layoutRight ref([{ i: 1, x: 0, y: 0, w: 2, h: 2 },{ i: 2, x: 2, y: 0, w: 2, h: 2 },{ i: 3, x: 0, y: 0, w: 2, h: 2 },{ i: 4, x: 2, y: 0, w: 2, h: 2 }
])处理方法
// 处理Grid同步
const handleGridSync () {layoutLeft.value.forEach((item1) {layoutRight.value.forEach((item2) {if (item1.i item2.i) {item2.x item1.xitem2.y item1.yitem2.w item1.witem2.h 2}})})gridLeftRef.value.layoutUpdate()gridLeftRef.value.updateHeight()gridRightRef.value.layoutUpdate()gridRightRef.value.updateHeight()
}// 创造Grid
const createGrid () {let maxH 0layoutLeft.value.forEach((item) {if (item.y maxH) maxH item.y})const uid createUuid()layoutLeft.value.push({ i: uid, x: 0, y: maxH, w: 2, h: 2 })layoutRight.value.push({ i: uid, x: 0, y: maxH, w: 2, h: 2 })handleGridSync()
}// 删除Grid
const deleteGrid (id: string) {const idx1 layoutLeft.value.findIndex((item1) item1.i id)layoutLeft.value.splice(idx1, 1)const idx2 layoutRight.value.findIndex((item2) item2.i id)layoutRight.value.splice(idx2, 1)handleGridSync()
}本次分享就到这儿啦我是鹏多多如果您看了觉得有帮助欢迎评论关注点赞转发我们下次见~
往期文章
Vue2全家桶Element搭建的PC端在线音乐网站vue3element-plus配置cdn助你上手Vue3全家桶之Vue3教程助你上手Vue3全家桶之VueX4教程助你上手Vue3全家桶之Vue-Router4教程超详细Vue的九种通信方式超详细Vuex手把手教程使用nvm管理node.js版本以及更换npm淘宝镜像源vue中利用.env文件存储全局环境变量以及配置vue启动和打包命令超详细Vue-Router手把手教程
个人主页
CSDNGitHub简书博客园掘金
