响应式网格项目动画布局_VueJS的响应式网格布局

最新推荐文章于 2024-07-11 11:11:53 发布
最新推荐文章于 2024-07-11 11:11:53 发布
阅读量1.2k 收藏 1
点赞数
文章标签： vue javascript typescript css layout ViewUI
原文链接：https://vuejsexamples.com/responsive-grid-layout-for-vuejs/
版权
VueResponsiveGridLayout是一个响应式的VueJS组件，提供可拖动和可调整大小的网格布局，支持断点以实现类似Bootstrap的响应式效果。组件允许进行常规布局和响应式布局，与Vuex兼容，并部分采用Typescript编写。它提供了如autoSize、cols、compactType等配置选项，并通过作用域插槽传递props到网格项。示例代码和API文档详细说明了如何注册、配置和使用该组件。
摘要由CSDN通过智能技术生成

响应式网格项目动画布局

VueResponsiveGridLayout (VueResponsiveGridLayout)

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

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

新闻 (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">

<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;

描述 (Description)

班级名称 (className)

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

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

自动尺寸 (autoSize)

科尔斯 (cols)

Number of cols. Default is 12.

列数。 默认值为12。

compactType (compactType)

Type of compacting layout. Default "vertical".

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

布局 (layout)

Layout array.

布局数组。

保证金 (margin)

Margin of grid-items.

网格项的边距。

containerPadding (containerPadding)

Padding of layout.

布局填充。

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属性更改位置和大小。

宽度 (width)

Width of grid layout. Is set from inside of VueGridLayout.

网格布局的宽度。 从VueGridLayout内部设置。

活动VueGridLayout (Events VueGridLayout)

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

@add-child(child: Vue)

@remove-child(child: Vue)

道具VueGridItem (Props VueGridItem)

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

@Prop({
    type: Number,
    required: true,
    default: 0,
})
public containerWidth: number;

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

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

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

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

// CORDS

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

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

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

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

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

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

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

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

// ID
@Prop({
    type: String,
    required: true,
})
public i: string;

// Functions
@Prop({
    type: Function,
})
public onDragStart: () => void;

@Prop({
    type: Function,
})
public onDrag: () => void;

@Prop({
    type: Function,
})
public onDragStop: () => void;

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

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

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

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

// Use CSS transforms instead of top/left
@Prop({
    required: false,
    type: Boolean,
    default: true,
})
public useCSSTransforms: boolean;

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

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

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

// Selector for draggable handle
@Prop({
    required: false,
    type: String,
    default: '',
})
public handle: string;

// Selector for draggable cancel
@Prop({
    required: false,
    type: String,
    default: '',
})
public cancel: string;

// Child
@Prop({
    type: Vue,
    required: false,
})
public component: Vue;

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

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

// Internal components

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

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

@Prop({
    type: Boolean,
    default: true,
})
public noTouchAction: boolean;

@Prop({
    type: String,
    default: 'none',
})
public touchAction: string;

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

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

描述 (Description)

科尔斯 (cols)

Cols number default 12.

列数默认值12。

containerWidth (containerWidth)

Width of container. Provided for counting of size and cords.

容器的宽度。 用于计数尺寸和电线。

rowHeight (rowHeight)

Row height. Default infinite.

行高。 默认为无限。

保证金 (margin)

Margin of elements. Default [10, 10].

元素的边距。 默认值[10，10]。

maxRows (maxRows)

Max rows in layout.

布局中的最大行数。

containerPadding (containerPadding)

Padding of container. Default [5, 5].

容器填充。 默认值[5，5]。

X (x)

X cord for item.

X线的项目。

ÿ (y)

Y cord for item.

物品的Y线。

w (w)

Width of item.

项目的宽度。

H (h)

Height of item.

项目的高度。

最小功率 (minW)

Min width for item when resized.

调整大小时项目的最小宽度。

最大功率 (maxW)

Max width for item when resized.

调整大小时项目的最大宽度。

分钟 (minH)

Min height for item when resized.

调整大小时项目的最小高度。

最高 (maxH)

Max height for item when resized.

调整大小时项目的最大高度。

一世 (i)

Id of item as string. Must be unique for items.

项目的ID为字符串。 项目必须唯一。

isDraggable (isDraggable)

Enable draggable mode.

启用可拖动模式。

isResizable (isResizable)

Enable resizable mode.

启用可调整大小模式。

不动 (immobile)

Makes item static.

使项目静态。

canBeResizedWithAll (canBeResizedWithAll)

Determinate if item can be resized with all by resizeAllItems() function.

确定是否可以通过resizeAllItems()函数全部调整项目的大小。

useCSSTransforms (useCSSTransforms)

usePercentages (usePercentages)

Uses percentages to count coords.

使用百分比计算坐标。

班级名称 (className)

Class name for item. Default vue-grid-item.

项目的类名称。 默认vue-grid-item 。

dragContainerClass (dragContainerClass)

Class for dragContainer in item.

项目中dragContainer的类。

处理 (handle)

Selector for draggable handel.

可拖动手柄的选择器。

取消 (cancel)

Selector for draggable cancel.

可拖动取消的选择器。

零件 (component)

Component to render inside grid item. You can use slot instead.

在网格项目内部渲染的组件。 您可以改用插槽。

componentProps (componentProps)

Props for component inside grid item.

网格项内组件的道具。

defaultSize (defaultSize)

Default size of item. This size can be used to determinate size of items after resizeAllItems().

项目的默认大小。 此大小可用于确定resizeAllItems()之后的项目大小。

resizableProps (resizableProps)

Props for resizable item.

可调整大小项目的道具。

draggableCoreProps (draggableCoreProps)

Props for draggable core item.

可拖动核心项目的道具。

noTouchAction (noTouchAction)

Enable/disable touch action style after dragged.

拖动后启用/禁用触摸动作样式。

touchAction (touchAction)

Touch action value after dragged.

拖动后触摸动作值。

heightFromChildren (heightFromChildren)

Determinate if item should have height get from child element.

确定项目是否应具有从子元素获取的高度。

占位符 (placeholder)

Determinate if item is a placeholder.

确定项目是否为占位符。

翻译自: https://vuejsexamples.com/responsive-grid-layout-for-vuejs/

响应式网格项目动画布局

cuk5340
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-responsive-grid-layout:Vue Repsonsive网格布局
05-17
VueResponsiveGridLayout 1.2.0 VueJS的响应式可拖动和可调整大小的网格布局。 它的响应能力基于断点（类似于Bootstrap）。 它基于 消息 现在，您可以进行常规布局和响应式布局。 它也可以与Vuex一起使用。 并且它部分地用Typescript编码。 从1.1.6开始可用的打字稿类型* .d.ts 演示版 具有VueResponsiveGridLayout的简单可编辑演示 例子 克隆项目。 运行$ npm run serve 用法 NPM npm install vue-responsive-grid-layout 登记 import {VueResponsiveGridLayout, VueGridItem, VueGridLayout } from 'vue-responsive-grid-layout' Vue.component
vue-grid-layout：Vue.js的可拖动和可调整大小的网格布局
02-06
Vue网格布局 什么是Vue网格布局？ vue-grid-layout是的网格布局系统，例如 。 受极大启发 产品特点 可拖动的小部件 可调整大小的小部件 静态小部件 边界检查以进行拖动和调整大小 可以在不重建网格的情况下添加或删除小部件 布局可以序列化和还原 自动RTL支持（调整大小无法在2.2.0上使用RTL） React灵敏 当前版本： 2.3.12（支持Vue 2.2+） 对于IE11等旧版浏览器，请使用版本 对于Vue 2.1.10及以下版本，请使用版 对于Vue 1，请使用版 文献资料 查看 使用vue-grid-layout的项目 认识别人吗？ 建立公关让我知道！ 有助于 如
vue-grid-layout详解
最新发布
Caleb的博客
07-11 1043
你可以根据项目需求自定义每个GridItem的样式。以下是一个简单的样式示例。
使用 vue-grid-layout + echart 实现图形可拖拽式布局+自适应大小
lvyilv的博客
05-01 6768
学习目标： 实现 echart 表在网页中的可拖拽式布局+自适应大小 学习内容： 安装 vue-grid-layout 安装 echart 编写可拖拽且可改变大小的 vue-grid-layout 组件 编写一个 echart 折线图组件 设置 echart 自适应大小 一、安装 echart 切到 vue-cli 目录下执行一下命令 npm install vue-grid-layout --save 此命令将为为你在本项目下安装 vue-grid-layout 编写放置 vue-gri
基于flexible、cssrem插件的Vue项目前端响应式布局及框架
Sunnyztg的博客
07-04 1580
本文介绍了如何使用flexible和cssrem插件实现Vue项目的前端响应式布局。通过使用这两个插件，我们可以轻松地适配不同屏幕尺寸的设备，提供更好的用户体验。本文还提供了一个示例代码，以主页面分成五块区域为例，演示了如何使用这两个插件进行布局。
vue 网格布局_Vue.js的可拖动和可调整大小的网格布局
cuk5239的博客
07-25 2783
vue 网格布局 Vue网格布局 (vue-grid-layout) vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired in React-Grid-Layout vue-grid-layout是Vue.js的网格布局系统，例如Gridster。 在React-Grid-Layo...
响应式网格项目动画布局
07-20
响应式网格项目动画布局是一种现代网页设计技术，旨在提供一种灵活、适应性强的网页布局方式，使得页面在不同设备和屏幕尺寸下都能保持良好的用户体验。这种布局方式主要依赖于CSS（层叠样式表）和HTML5（超文本标记...
响应式网格项目动画效果布局
06-06
响应式网格项目动画效果布局是一种现代网页设计技术，它结合了HTML5的先进特性，以实现灵活、适应不同设备屏幕尺寸的布局，并在用户交互时为网格中的元素添加动态效果。这种布局方式常用于杂志式网站，因为它能够...
project13_HTMLCSS响应式布局_
10-04
6. **响应式框架（Responsive Frameworks）**：Bootstrap、Foundation等响应式框架提供预设的响应式网格系统、组件和样式，简化了响应式设计的工作。它们包含媒体查询、栅格系统和预定义的类，能快速构建响应式页面...
html5响应式网格布局动画打开列表内容特效
11-24
在压缩包“texiao4096_1560681152”中，可能包含了一个示例项目，演示了如何使用HTML5和CSS3实现响应式网格布局以及动态列表内容展开的动画效果。这个项目可能包括HTML文件、CSS样式表和可能的JavaScript脚本，...
探索灵活布局新纪元：Vue Grid Layout
gitblog_00069的博客
05-11 317
探索灵活布局新纪元：Vue Grid Layout vue-grid-layoutA draggable and resizable grid layout, for Vue.js.项目地址:https://gitcode.com/gh_mirrors/vu/vue-grid-layout Vue Grid Layout 是一个为 Vue.js 应用程序设计的网格布局系统，灵感来源于 Grids...
vue 范围拖选插件
Tomato2313的博客
04-22 2010
实现鼠标范围拖选，解决鼠标移动过快无法监听的问题
Vue项目中通过插件pxtorem实现大屏响应式
huangzhixin1996的博客
06-04 3225
因为设计图一般是给一个固定的尺寸，所有元素都统一以px为单位提供，所以一般情况下我们为了尽可能还原设计图，都一一对应地按同样的数值去实现页面，最后为了高效率自动化地将对应的px都转化为rem，所以我们必须使用这款插件。rem单位代表的是根节点的font-size大小，所以当我们在页面上使用rem去替代px的时候，就可以通过修改根节点font-size的值，动态地让页面上的元素根据不同浏览器宽高下去实现变化。作用：根据浏览器的可视窗口大小，动态地去设置根节点font-size的值，也就是rem的基准值。
js常用插件(十三)之可拖动、调整大小的Vue栅格布局组件vue-grid-layout
小龚的博客
02-22 2767
js常用插件之可拖动、调整大小的Vue栅格布局组件–桌面布局vue-grid-layout 欢迎点击: 个人官网博客 老样子，先上效果图 先下载 npm install vue-grid-layout --save 代码demo <template> <div class="board" style="width: 50%"> <div class="home"> <grid-layout :layout="layoutD
网格布局每个网格都能放置一个组件_前端项目005 Vue 造轮子网格布局
weixin_42165018的博客
12-30 376
頔言頔语：进步，一定要进步，进步是跟收入持平的本钱。总有人问:前端开发中是哪些轮子值得实现一遍。但是你造过那些轮子呢？这是我造过的！声明：本项目所有的UI，来自于方应航，我只做简单修改！输入框 · 轱辘 · 语雀​www.yuque.com所有的项目按照流程按照一下目录进行需求分析UI设计项目知识点项目难点（在3中解决，用饮用块的方式标识）1. 需求分析网格布局就是把一个div分成N部分，每个部分...
Vue-grid-layout实现web拖拽布局功能
佳瑞的博客
07-20 4445
最近在完成web端在线绘图功能时，需要开发一个从左侧拖拽一种图标到画布中。调研了非常多种现在做拖拽布局的组件，调研的地址是：https://vuejsexamples.com/tag/drag/ 经过比较，选择了一款优秀的可拖拽框架，vue-grid-layout。 npm安装 npm install vue-grid-layout --save 使用demo <grid-layout :layout.sync="layout" :col-n
原生js实现拖拽移动与缩放效果
橙子小姐的博客
03-15 1407
效果图如下-实现了简单的拖拽和缩放功能 第一步—简单的拖拽功能 // 创建一个MoveClass构造函数 function MoveClass(id, options = {}) { // 绑定ele属性 this.ele = document.querySelector(id); this.move(); } // 给Mov...
Vue 快速布局插件安装配置
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
12-24 305
PC端推荐使用插件element-ui element-ui 的基本使用 https://element.eleme.cn/#/zh-CN/component/installation 官网 安装配置 //项目的的目录中执行 cnpm install element-ui --save #### main.js中完整引入配置 //element-ui的配置 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk
vue定制化桌面开发
qq_38694388的博客
04-12 2128
最近因项目需求，需要开发一个可以拖拽布局的功能。本人刚接触vue不久，但已经被其强大的功能所吸引，再加上vue的组件化思想很契合项目需求，所以决定使用vue开发。网上搜索vue实现拖拽布局的插件许多，最后选择了容易上手的vue-grid-layout插件，废话太多了，开始整干货。 github地址：vue-grid-layout 首先安装插件 npm install vue-grid-layout...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值