瀑布流vue-grid-layout vue2中使用 =》项目首页，动态编辑，嵌入子件模块

已于 2023-08-07 18:30:41 修改
阅读量310 收藏
点赞数
分类专栏： 前后端项目总结 文章标签： vue.js 前端 javascript
于 2023-08-07 18:28:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40231090/article/details/132152218
版权
前后端项目总结 专栏收录该内容
7 篇文章 2 订阅 ¥29.90 ¥99.00
订阅专栏

一、vue中简单案例

具体可看官网 https://jbaysolutions.github.io/vue-grid-layout/zh/

1、安装组件

NPM
npm install vue-grid-layout --save

安装后如果有报错
在这里插入图片描述
找了一圈，是版本问题，降版本即可
npm install vue-grid-layout@2.3.7 --save

2、vue文件

<template>
  <div style
了解本专栏 订阅专栏 解锁全文
YSY_DO_IT
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
vue2实现瀑布流布局
weixin_51958960的博客
01-29 1240
npm install vue-waterfall2@1.8.20 --save （提示：一定要安装1.8.20，最新版会有一部分问题）2.打开main.js文件。
Vue2瀑布流图片展示（Waterfall）
Mr Dear的博客
12-06 4176
Vue2使用纯CSS和JS计算两种方式实现的瀑布流图片展示组件
2024年Web前端最新使用 vue-waterfall2插件 vue 瀑布流(1)，内容太过真实
最新发布
2401_84411323的博客
05-06 739
框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
微信小程序实战，基于vue2实现瀑布流
隐风的博客
11-21 3714
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
vue项目中区域拖拽修改大小， Vue Grid Layout -️ 适用Vue.js的栅格布局系统
zhang_zan
02-28 2030
vue项目中区域拖拽修改大小， Vue Grid Layout -️ 适用Vue.js的栅格布局系统
Vue Grid Layout使用
henudxk的博客
07-12 499
vue-grid-layout 使用，增减数据项后调整容器高度，对调整后的结果排序
vue-grid-layout：Vue.js的可拖动和可调整大小的网格布局
02-06
Vue网格布局 什么是Vue网格布局？ vue-grid-layout是的网格布局系统，例如 。 受极大启发 产品特点 可拖动的小部件 可调整大小的小部件 ...使用vue-grid-layout的项目 认识别人吗？ 建立公关让我知道！ 有助于 如
vue-responsive-grid-layout:Vue Repsonsive网格布局
05-17
VueResponsiveGridLayout 1.2.0 VueJS的响应式可拖动和可调整大小的网格布局。... import {VueResponsiveGridLayout, VueGridItem, VueGridLayout } from 'vue-responsive-grid-layout' Vue.component
Vue-grid-layout官方文档
03-11
1.详细介绍了Vue-Gird-layout的使用及API
使用Vue-Grid-Layout实现自定义工作台
02-01
使用Vue-Grid-Layout实现自定义工作台
vue瀑布流组件(vue-waterfall-easy 2.x)
02-21
vue瀑布流组件(vue-waterfall-easy 2.x) 这是一个vue组件，包含瀑布流布局和无限滚动加载 与其他实现相比，无需在返回的数据中指定图像的宽度和高度 正是因为有了第二项，图像才被预加载，然后进行布局 响应式...
v-grid-layout：网格布局
02-15
v-grid-layout⺲ v-grid-layout是Vue的网格布局系统，例如 。 这是的裸分支，它支持将GridItem嵌套在任何其他组件中 [| | ] 特征 可拖动的小部件 可调整大小的小部件 静态小部件 边界检查以进行拖动和调整大小 可以在不重建网格的情况下添加或删除小部件 布局可以序列化和还原 自动RTL支持（调整大小无法在2.2.0上使用RTL） React灵敏 入门 安装 npm # install with npm $ npm install @geospoc/v-grid-layout 导入库 import VueGridLayout from '@geospoc/v-grid-layout' ; 添加到其他Vue组件 export default { components : { GridLayout : VueGridLayout . G
使用 vue-grid-layout + echart 实现图形可拖拽式布局+自适应大小
lvyilv的博客
05-01 6485
学习目标： 实现 echart 表在网页中的可拖拽式布局+自适应大小 学习内容： 安装 vue-grid-layout 安装 echart 编写可拖拽且可改变大小的 vue-grid-layout 组件 编写一个 echart 折线图组件 设置 echart 自适应大小 一、安装 echart 切到 vue-cli 目录下执行一下命令 npm install vue-grid-layout --save 此命令将为为你在本项目下安装 vue-grid-layout 编写放置 vue-gri
基于vue2.0的登录界面实现
热门推荐
qq_43483403的博客
08-16 1万+
> 登录功能开发:实现用户验证，跳转登录页面 > 项目技术栈： >· vue >· vue-router >· axios >· elementUI >· less
vue项目中vue-grid-layout使用简介
qq_26887683的博客
02-03 2247
vue项目中vue-grid-layout使用简介
Vue2+CSS实现一个瀑布流布局案例
欢迎来到长风沛雨的博客
05-16 1485
css简单的做一个瀑布流（多列布局）案例
【Vue瀑布流布局】vue简单实现瀑布流布局，循环数据自动排列到最短的列上【详细注释，直接使用】
seeeeeeeeeee的博客
09-05 6501
瀑布流布局是什么呢？应用于什么场景呢？简单描述一下，就是，瀑布流布局就是宽度一致，但是高度不限定死，最终通过算法排列，使得布局出现一种上下交错显示的感觉，看起来像是瀑布一样。应用场景：可以说非常多了，比如最常见的淘宝，蘑菇街等都是瀑布流布局做前端的肯定都会遇到这种情况需要使用瀑布流布局那么今天我就专门整理一个好用的瀑布流布局实现方法以后小伙伴们在需要做到这个布局的时候可以直接来着复制去改改就可以使用了。
vue3使用vue-grid-layout
04-29
Vue3 中使用 vue-grid-layout 的步骤如下： 1. 安装 vue-grid-layout 可以使用 npm 或 yarn 安装 vue-grid-layout： ``` npm install vue-grid-layout ``` ``` yarn add vue-grid-layout ``` 2. 导入 vue-grid-layout 在需要使用 vue-grid-layout 的组件中导入 vue-grid-layout： ```javascript import VueGridLayout from 'vue-grid-layout'; ``` 3. 注册 vue-grid-layout 组件 在组件中注册 vue-grid-layout 组件： ```javascript export default { components: { VueGridLayout }, // ... } ``` 4. 使用 vue-grid-layout 在模板中使用 vue-grid-layout： ```vue <template> <vue-grid-layout :layout="layout" :col-num="12" :row-height="30"> <div v-for="item in layout" :key="item.i" :data-grid="item">{{ item.i }}</div> </vue-grid-layout> </template> <script> import VueGridLayout from 'vue-grid-layout'; export default { components: { VueGridLayout }, data() { return { layout: [ { i: 'a', x: 0, y: 0, w: 3, h: 2 }, { i: 'b', x: 3, y: 0, w: 6, h: 2 }, { i: 'c', x: 9, y: 0, w: 3, h: 4 }, { i: 'd', x: 0, y: 2, w: 6, h: 2 }, { i: 'e', x: 6, y: 2, w: 6, h: 2 }, { i: 'f', x: 0, y: 4, w: 12, h: 2 } ] }; } }; </script> ``` 以上就是在 Vue3 中使用 vue-grid-layout 的基本步骤，你可以根据自己的需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值