vue3中使用vue-grid-layout来实现可拖动的仪表盘面板

1.package.json内安装的包：

  "vue-grid-layout": "^3.0.0-beta1",

2.main.js内引入：

import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import VueGridLayout from "vue-grid-layout";
import App from "./App.vue";
// 其他引入
import "./style/element_visiable.scss";
import "./core/gin-vue-admin";
import router from "@/router/index";
import "@/permission";
import run from "@/core/gin-vue-admin.js";
import auth from "@/directive/auth";
import { store } from "@/pinia";const app = createApp(App);
app.config.productionTip = false;app.use(run).use(store).use(auth).use(router).use(VueGridLayout).use(ElementPlus).mount("#app");export default app;

3.相关代码简易demo

 <template><div class="grid-demo"><grid-layout:layout="layout":col-num="12":row-height="30":is-draggable="true":is-resizable="true":vertical-compact="true":use-css-transforms="true"@layout-ready="layoutReadyEvent"@layout-updated="layoutUpdatedEvent"><grid-itemv-for="item in layout":key="item.i":x="item.x":y="item.y":w="item.w":h="item.h":i="item.i":drag-allow-from="'.grid-drag-handle'"@resized="resizedEvent"@moved="movedEvent"><div class="grid-item-content"><div>{{ item.i }}</div><div class="grid-drag-handle" style="cursor: move">Drag</div></div></grid-item></grid-layout></div>
</template><script setup>
import { ref, onMounted } from "vue";
const layout = ref([]);
onMounted(() => {layout.value = [{ x: 0, y: 0, w: 2, h: 2, i: "0" },{ x: 2, y: 0, w: 4, h: 2, i: "1" },{ x: 6, y: 0, w: 2, h: 4, i: "2" },];
});
const layoutUpdatedEvent = (layout) => {console.log("layoutUpdatedEvent", layout);
};
const resizedEvent = (item, size) => {console.log("resizedEvent", item, size);
};
const movedEvent = (item, delta) => {console.log("movedEvent", item, delta);
};
const layoutReadyEvent = (layout) => {console.log(layout, "layoutReadyEvent");
};
</script><style scoped>
.grid-demo {padding: 20px;
}.vue-grid-item {background-color: #e0e0e0;border: 1px solid #ccc;border-radius: 4px;
}.grid-item-content {height: 100%;display: flex;align-items: center;justify-content: center;font-size: 18px;color: #333;
}
</style>

注意：如果有这种类型的报错

这些错误通常由 Vue Grid Layout 和 interact.js 交互库引起，可能是由于组件更新面板数组时，Vue Grid Layout 的内部状态未能及时同步或清理所致。例如，当 layout 字段需要异步获取时，可以在 grid-layout 组件中添加 v-if 条件判断；若在更新 layout 时出现该错误，使用 nextTick 即可解决。