vuejs拖拽布局_VueJS的响应式可拖动和可调整大小的网格布局

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

cuk5340

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

阅读量4.2k

点赞数

文章标签： vue javascript typescript wpf layout ViewUI

原文链接：https://vuejsexamples.com/responsive-draggable-and-resizable-grid-layout-for-vuejs/

版权

VueResponsiveGridLayout是一个VueJS库，提供响应式的拖动和可调整大小的网格布局。它基于断点实现响应式，支持Vuex，并部分使用Typescript编写。该库允许创建常规和响应式布局，包含多种配置选项如列数、压缩类型、边距等。使用者可以通过NPM安装，并通过作用域插槽传递props来实现自定义功能。

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

vuejs拖拽布局

VueResponsiveGridLayout (VueResponsiveGridLayout)

Responsive draggable and resizable grid layout for VueJS. Its responsiveness is based on breakpoints (similar to Bootstrap).

VueJS的响应式可拖动和可调整大小的网格布局。它的响应能力基于断点(类似于Bootstrap)。

View Demo 查看演示 Download Source 下载源

新闻 (News)

Now you can make both normal and responsive layout.

现在，您可以进行常规布局和响应式布局。

It works with Vuex nice as well.

它也可以与Vuex一起使用。

And it's partly coded in Typescript.

并且它部分地用Typescript编码。

例 (Example)

Clone project.
克隆项目。
run $ npm run serve
运行$ npm run serve

用法 (Usage)

NPM (NPM)

npm install vue-responsive-grid-layout

注册 (Registration)

import {VueResponsiveGridLayout, VueGridItem, VueGridLayout } from 'vue-responsive-grid-layout'

Vue.component('vue-responsive-grid-layout', VueResponsiveGridLayout)
Vue.component('vue-grid-item', VueGridItem)
Vue.component('vue-grid-layout', VueGridLayout)

注册为插件 (Registration as plugin)

import Vue from 'vue'
import VueResponsiveGridLayout from 'vue-responsive-grid-layout'

Vue.use(VueResponsiveGridLayout)

简单的例子 (Simple example)

<template>
    <VueResponsiveGridLayout
        @layout-update="onLayoutUpdate"
        @layout-change="onLayoutChange"
        @layout-init="onLayoutInit"
        @width-change="onWidthChange"
        @breakpoint-change="onBreakpointChange"
        :layouts="layouts"
        :compactType="'vertical'"
        :breakpoint="breakpoint"
        :cols="cols"
        ref="layout"
    >
    <template slot-scope="props">
      <VueGridItem v-for="item in props.layout"
              :i="item.i"
              :w.sync="item.w"
              :h.sync="item.h"
              :x="item.x"
              :y="item.y"
              :immobile.sync="item.immobile"
              :containerWidth="props.containerWidth"
              :rowHeight="props.rowHeight"
              :isDraggable="true"
              :isResizable="true"
              :className="'grid-item'"
              :cols="props.cols"
              :heightFromChildren="false"
              :maxRows="props.maxRows"
      >
          <div>Test</div>
      </VueGridItem>
    </template>
    </VueResponsiveGridLayout>
</template>

<script>

export default {
      public onLayoutUpdate(layout: Layout, layouts: ResponsiveLayout, last) {
          this.updateLayout({layout, breakpoint: this.breakpoint});
      }
    
      public onLayoutChange(layout: Layout, layouts: ResponsiveLayout, breakpoint: Breakpoint) {
          this.updateLayout({layout, breakpoint});
      }
    
      public onLayoutInit(layout, currentLayouts, cols, breakpoint) {
          this.updateCols({cols});
          this.updateBreakpoint({breakpoint});
          this.updateLayout({layout, breakpoint});
      }
    
      public onBreakpointChange(breakpoint: Breakpoint) {
          this.updateBreakpoint({breakpoint});
      }
    
      public onWidthChange(width: number, cols: number) {
          this.updateCols({cols});
      }
}
</script>

API (API)

Works with Vuex.

Vue Responsive Grid Layout uses scoped slot inside to get some props.

Vue响应式网格布局使用内部的作用域插槽获取一些道具。

<slot :containerWidth="width" :layout="layout" :rowHeight="rowHeight" :cols="cols" :maxRows="maxRows">

You can use it to send containerWidth, layout, rowHeight, cols and maxRows for grid-items.

您可以使用它为网格项目发送containerWidth，layout，rowHeight，cols和maxRows。

。同步 (.sync)

Sync modifier is used on `w` and `h` props to make them reactive for external changes, 
when :heightFromChildren is set to `true`

道具VueResponsiveGridLayout (Props VueResponsiveGridLayout)

@Prop({
    type: Boolean,
    required: false,
})
public autoSize: boolean;

@Prop({
    type: Number,
    required: false,
    default: 12,
})
public cols: number;

@Prop({
    type: String,
    required: false,
    default: 'vertical',
})
public compactType: CompactType;

@Prop({
    type: Array,
    required: false,
    default: () => [5, 5],
})
public margin: [number, number];

@Prop({
    type: Array,
    required: false,
    default: () => [5, 5],
})
public containerPadding: [number, number] | null;

@Prop({
    type: Number,
    required: false,
    default: 10,
})
public rowHeight: number;

@Prop({
    type: Number,
    required: false,
    default: Infinity,
})
public maxRows: number;

@Prop({
    type: Boolean,
    required: false,
    default: true,
})
public isDraggable: boolean;

@Prop({
    type: Boolean,
    required: false,
    default: true,
})
public isResizable: boolean;

@Prop({
    type: Boolean,
    required: false,
    default: false,
})
public preventCollision: boolean;

@Prop({
    type: Boolean,
    required: false,
    default: true,
})
public useCSSTransforms: boolean;

// Responsive config
@Prop({
    type: String,
    required: false,
    default: 'vue-responsive-grid-layout',
})
public className: string;

@Prop({
    type: String,
    required: false,
    default: 'lg',
})
public breakpoint: Breakpoint;

@Prop({
    type: Object,
    required: false,
    default: () => ({ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }),
})
public breakpoints: { [key: string]: number };

@Prop({
    type: Object,
    required: false,
    default: () => ({ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }),
})
public colsAll: { [key: string]: number };

@Prop({
    type: Object,
    required: false,
    default: () => ({}),
})
public layouts: { [key: string]: Layout };

描述 (Description)

自动尺寸 (autoSize)

科尔斯 (cols)

Number of cols. Default is 12.

列数。默认值为12。

compactType (compactType)

Type of compacting layout. Default "vertical".

压实布局的类型。默认为"vertical" 。

保证金 (margin)

Margin of grid-items.

网格项的边距。

containerPadding (containerPadding)

Width of container, it is needed to calculate the width of items.

容器的宽度，需要计算物品的宽度。

rowHeight (rowHeight)

Height of one grid unit row for placeholder.

占位符的一个网格单位行的高度。

maxRows (maxRows)

Max rows in layout.

布局中的最大行数。

isDraggable (isDraggable)

Items can be dragged.

可以拖动项目。

isResizable (isResizable)

Items can be resized.

可以调整项目的大小。

防止碰撞 (preventCollision)

Preventing collisions. Makes some grid items static.

防止碰撞。使某些网格项变为静态。

useCSSTransforms (useCSSTransforms)

Uses transform css property for changing positions and size.

使用transform css属性更改位置和大小。

班级名称 (className)

Defines additional classes for grid layout. Default css class is vue-responsive-grid-layout.

定义网格布局的其他类。默认CSS类是vue-responsive-grid-layout 。

断点 (breakpoint)

Actual breakpoint. Default is "lg".

实际断点。默认值为“ lg”。

断点 (breakpoints)

Breakpoints object which define width for breakpoints.

断点对象，定义断点的宽度。

Default { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }.

默认值{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 } 。

colsAll (colsAll)

Defines cols for given breakpoints.

为给定的断点定义cols。

Default { lg: 12, md: 6, sm: 4, xs: 2, xxs: 1 }.

默认值{ lg: 12, md: 6, sm: 4, xs: 2, xxs: 1 } 。

版面 (layouts)

Layouts object for example:

布局对象例如：

{
    "lg" : [
        { x: 0, y: 0, w: 1, h: 1, i: "1" },
        { x: 1, y: 0, w: 1, h: 1, i: "2" },
    ],
    "md" : [
        { x: 0, y: 1, w: 1, h: 1, i: "1" },
        { x: 1, y: 1, w: 1, h: 1, i: "2" },
    ]
}

事件VueResponsiveGridLayout (Events VueResponsiveGridLayout)

@layout-update(layout: Layout, layouts: ResponsiveLayout, last: boolean)

@layout-change(layout: Layout, layouts: ResponsiveLayout, breakpoint: Breakpoint)

@layout-init(layout: Layout, layouts: ResponsiveLayout, cols: number, breakpoint: Breakpoint);

@width-change(width: number, cols: number)

@breakpoint-change(breakpoint: Breakpoint)

@add-child(child: Vue)

@remove-child(child: Vue)

VueResponsiveGridLayout上的功能 (Function on VueResponsiveGridLayout)

resizeAllItems(width: number, compactType: CompactType, defaultSize = false, mode = false)

道具VueGridLayout (Props VueGridLayout)

@Prop({
    type: String,
    required: false,
    default: 'vue-grid-layout',
})
public className: string;

@Prop({
    type: Object,
    required: false,
})
public styles: object;

@Prop({
    type: Boolean,
    required: false,
})
public autoSize: boolean;

@Prop({
    type: Number,
    required: false,
    default: 12,
})
public cols: number;

@Prop({
    type: String,
    required: false,
    default: '',
})
public draggableCancel: string;

@Prop({
    type: String,
    required: false,
    default: '',
})
public draggableHandle: string;

@Prop({
    type: String,
    required: false,
    default: 'vertical',
})
public compactType: CompactType;

@Prop({
    required: false,
    validator: (value) => {
        if (!value) {
            return true;
        }
        return validateLayout(value, 'layout');
    },
})
public layout: Layout;

@Prop({
    type: Array,
    required: false,
    default: () => [5, 5],
})
public margin: [number, number];

@Prop({
    type: Array,
    required: false,
    default: () => [5, 5],
})
public containerPadding: [number, number] | null;

@Prop({
    type: Number,
    required: false,
    default: 10,
})
public rowHeight: number;

@Prop({
    type: Number,
    required: false,
    default: Infinity,
})
public maxRows: number;

@Prop({
    type: Boolean,
    required: false,
    default: true,
})
public isDraggable: boolean;

@Prop({
    type: Boolean,
    required: false,
    default: true,
})
public isResizable: boolean;

@Prop({
    type: Boolean,
    required: false,
    default: false,
})
public preventCollision: boolean;

@Prop({
    type: Boolean,
    required: false,
    default: true,
})
public useCSSTransforms: boolean;

@Prop({
    type: Number,
    required: true,
})
public width: number;