【vue 低代码】组件拖拽小案例

工具

vue-grid-layout

在 vue3 环境中使用

npm install vue-grid-layout@3.0.0-beta1 --save// main.js
import VueGridLayout from 'vue-grid-layout'
createApp(App).use(VueGridLayout).mount('#app')

组件拖拽小案例

<template><div class="container"><grid-layout:layout="layout":col-num="12":row-height="30":is-draggable="true":is-resizable="true":is-mirrored="false":vertical-compact="true":margin="[10, 10]":use-css-transforms="true"><grid-itemstyle="background: #ccc;" v-for="item in layout":x="item.x":y="item.y":w="item.w":h="item.h":i="item.i":key="item.i"><component :is="item.component"></component></grid-item></grid-layout></div>  
</template>
<script setup>
import { reactive } from 'vue';
import HelloWorld from '@/components/HelloWorld'
import HelloWorld1 from '@/components/HelloWorld1'
import HelloWorld2 from '@/components/HelloWorld2'
const layout = reactive([{"x":0,"y":0,"w":8,"h":6,"i":"0", component: HelloWorld},{"x":8,"y":0,"w":4,"h":6,"i":"1", component: HelloWorld1},{"x":0,"y":6,"w":6,"h":5,"i":"2", component: HelloWorld2}
])
</script>
<style>
.container {margin: 120px auto 0px 120px;width: 1200px;border: 1px solid #ccc;border-radius: 6px;
}
.vue-grid-item.vue-grid-placeholder {background: green !important;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;
}
</style>