当前位置：首页 > news >正文

vue实现拖拉拽效果，类似于禅道首页可拖拽排布展示内容（插件-Grid Layout）

news 2025/8/27 9:52:10

vue实现拖拉拽效果（插件-Grid Layout）

这个是类似与禅道那种首页有多个指标模块，允许用户自己拼装内容的那种感觉。

实现效果

在这里插入图片描述

插件资料

vue3版本

如果项目是vue3 的话使用的是 Grid Layout Plus。

官网：https://grid-layout-plus.netlify.app/zh/

文档：https://grid-layout-plus.netlify.app/zh/guide/installation.html

在这里插入图片描述

vue2版本

如果项目是vue2版本的话，可以使用 Vue Grid Layout。

官网：https://jbaysolutions.github.io/vue-grid-layout/zh/

文档：https://jbaysolutions.github.io/vue-grid-layout/zh/guide/

在这里插入图片描述

vue3项目使用Grid Layout

使用的话也比较简单，现在以vue3使用为例介绍。

安装插件

安装的话只需要一行命令就可以执行：

npm i grid-layout-plusoryarn add grid-layout-plus

导入插件

导入的话直接在需要的页面导入就可以了：

import {GridLayout, GridItem} from 'grid-layout-plus';

当然，也可以挂在到全局上面：

app.component('GridLayout', GridLayout).component('GridItem', GridItem)

开发

引入之后就可以直接用了，这里可以根据官网文档进行开发，下面给一个小的案例：

<template><div class="ed-page"><GridLayout v-model:layout="layout" :col-num="24" :restore-on-drag="true" :vertical-compact="true" :row-height="50"><GridItem v-for="item in layout":key="item.i":x="item.x":y="item.y":w="item.w":h="item.h":i="item.i":is-resizable="item.isResizable"><p class="text">{{ item.i }}</p><p class="text">{{ item.title }}</p><p class="text">{{ item.url }}</p></GridItem></GridLayout></div>
</template>
<script setup>
import {GridLayout, GridItem} from 'grid-layout-plus';
import {ref} from "vue";const layout = ref([{x: 0,y: 0,w: 12,h: 5,i: '0',static: false,isResizable: false,url: "https://grid-layout-plus.netlify.app/zh/",title: "grid-layout-plus"},{x: 12, y: 0, w: 12, h: 5, i: '2', static: false},
]);</script>
<style scoped lang="scss">
.ed-page {height: 100%;overflow-y: auto;overflow-x: hidden;
}.vgl-layout {//background-color: #eee;
}.vgl-layout::before {position: absolute;width: calc(100% - 5px);height: calc(100% - 5px);margin: 5px;content: '';background-image: linear-gradient(to right, #E9E9EB 1px, transparent 1px),linear-gradient(to bottom, #E9E9EB 1px, transparent 1px);background-repeat: repeat;background-size: calc(calc(100% - 5px) / 24) 60px;
}:deep(.vgl-item:not(.vgl-item--placeholder)) {background-color: #FFF;border: 1px solid #909399;
}:deep(.vgl-item--resizing) {opacity: 90%;
}:deep(.vgl-item--static) {background-color: #cce;
}
</style>