推荐一款:简单、易懂、功能强大的Vue3可拖拽插件
第一步:安装
npm 使用以下命令安装npm install vue-grid-layout --save
yarn 使用以下命令安装yarn add vue-grid-layout
第二步:配置全局变量
import { createApp } from 'vue' import App from './App.vue' import VueGridLayout from 'vue-grid-layout' // 引入layout // 创建Vue应用实例 const app = createApp(App); app.use(VueGridLayout) // 挂载根组件 app.mount('#app');
第三步:vue页面使用
<template> <grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="draggable" :is-resizable="resizable" :vertical-compact="true" :use-css-transforms="true" > <grid-item v-for="item in layout" :static="item.static" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :key="item.i" > <span class="text"> {{itemTitle(item)}} </span> </grid-item> </grid-layout> </template> <script > export default { data() { return { layout: [ {"x":0,"y":0,"w":2,"h":2,"i":"0", static: false}, {"x":2,"y":0,"w":2,"h":4,"i":"1", static: true}, {"x":4,"y":0,"w":2,"h":5,"i":"2", static: false}, {"x":6,"y":0,"w":2,"h":3,"i":"3", static: false}, {"x":8,"y":0,"w":2,"h":3,"i":"4", static: false}, {"x":10,"y":0,"w":2,"h":3,"i":"5", static: false}, {"x":0,"y":5,"w":2,"h":5,"i":"6", static: false}, {"x":2,"y":5,"w":2,"h":5,"i":"7", static: false}, {"x":4,"y":5,"w":2,"h":5,"i":"8", static: false}, {"x":6,"y":3,"w":2,"h":4,"i":"9", static: true}, {"x":8,"y":4,"w":2,"h":4,"i":"10", static: false}, {"x":10,"y":4,"w":2,"h":4,"i":"11", static: false}, {"x":0,"y":10,"w":2,"h":5,"i":"12", static: false}, {"x":2,"y":10,"w":2,"h":5,"i":"13", static: false}, {"x":4,"y":8,"w":2,"h":4,"i":"14", static: false}, {"x":6,"y":8,"w":2,"h":4,"i":"15", static: false}, {"x":8,"y":10,"w":2,"h":5,"i":"16", static: false}, {"x":10,"y":4,"w":2,"h":2,"i":"17", static: false}, {"x":0,"y":9,"w":2,"h":3,"i":"18", static: false}, {"x":2,"y":6,"w":2,"h":2,"i":"19", static: false} ], } }, methods: { itemTitle(item) { let result = item.i; if (item.static) { result += " - Static"; } return result; } } } </script> <style scoped> .vue-grid-layout { background: #eee; } .vue-grid-item:not(.vue-grid-placeholder) { background: #ccc; border: 1px solid black; } .vue-grid-item .resizing { opacity: 0.9; } .vue-grid-item .static { background: #cce; } .vue-grid-item .text { font-size: 24px; text-align: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 100%; width: 100%; } .vue-grid-item .no-drag { height: 100%; width: 100%; } .vue-grid-item .minMax { font-size: 12px; } .vue-grid-item .add { cursor: pointer; } .vue-draggable-handle { position: absolute; width: 20px; height: 20px; top: 0; left: 0; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='5' fill='#999999'/></svg>") no-repeat; background-position: bottom right; padding: 0 8px 8px 0; background-repeat: no-repeat; background-origin: content-box; box-sizing: border-box; cursor: pointer; } </style>
做完以上三步,就可以运行项目,查看效果。
基本属性介绍
属性 | |
i | 栅格中元素的ID |
x | 标识栅格元素位于第几列,需为自然数 |
y | 标识栅格元素位于第几行,需为自然数 |
w | 标识栅格元素的初始宽度,值为colWidth 的倍数 |
h | 标识栅格元素的初始高度,值为rowHeight 的倍数 |
这款插件它不仅拥有模块拖拽、放大、缩小的功能。它还拥有动态创建模块、防碰撞、模块栅格布局等强大功能,赶快去使用吧。
原文连接:https://mp.weixin.qq.com/s?__biz=MzkyNDc0Nzk4OA==&mid=2247483711&idx=1&sn=5f302efa08fdd31ca8b077e5a4176ce2&chksm=c1d05084f6a7d992694f949d2077a28c5c100234ee3973c9ed245cb97b95dcfe5605d55ff60b#rd
查看原文(或关注微信公众号)可观看演示视频
关注我:一个全栈多端的宝藏博主,定时分享技术文章,不定时分享开源项目。关注我,带你认识不一样的程序世界