Vue 实现可拖拽组件

最新推荐文章于 2024-08-29 15:10:00 发布

土豆丶杨

最新推荐文章于 2024-08-29 15:10:00 发布

阅读量468

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/stevenyanghahha/article/details/130334692

版权

本文展示了如何在Vue项目中使用vue-grid-layout组件进行网格布局管理。通过npm安装vue-grid-layout@3.0.0-beta1，然后在模板中引用并配置组件属性，如col-num、maxRows等，支持元素的拖拽和调整大小功能。同时，文章还提到了resized和moved事件的处理函数，用于监听元素尺寸变化和移动事件。

摘要由CSDN通过智能技术生成

使用组件： vue-grid-layout

npm安装：

npm install vue-grid-layout@3.0.0-beta1

组件引用：


<template>
    <grid-layout :layout.sync="testLayout" :col-num="24" :maxRows="12" :row-height="65" :is-draggable="true" :is-resizable="true" :vertical-compact="true" :use-css-transforms="true" :margin="[10, 10]">
        <grid-item v-for="item in testLayout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" style="overflow: auto" @resized="reizedEvent" @moved="movedEvent">{{ item.i }}</grid-item>
    </grid-layout>
</template>

<script>
import { ref } from 'vue'
import VueGridLayout from 'vue-grid-layout'

export default {
    components： {
        GridLayout: VueGridLayout.GridLayout,
        GridItem: VueGridLayout.GridItem
    },
    setup(props) {
        const testaLayout = ref([
            {w: 6, h: 3, y: 6, x: 12, i: 3},
            {w: 12, h: 6, y: 0, x: 0, i: 0},
            {w: 6, h: 3, y: 9, x: 12, i: 4},
            {w: 6, h: 3, y: 9, x: 18, i: 6},
            {w: 12, h: 6, y: 0, x: 12, i: 1},
            {w: 6, h: 3, y: 6, x: 18, i: 5},
            {w: 12, h: 6, y: 6, x: 0, i: 2}
        ])

        const resizedEvent = () => {
            console.log("REIZE i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx)
        }

        const movedEvent = (i, newX, newY) => {
            console.log('movedEvent', i, newX, newY)
        }
        return {
            testaLayout,
            resizedEvent,
            movedEvent
        }
    }
}
</script>