【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-item
            style="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>