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

已于 2023-08-07 18:30:41 修改
阅读量327 收藏
点赞数
分类专栏： 前端总结 前端vue总结 文章标签： vue.js 前端 javascript
于 2023-08-07 18:28:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40231090/article/details/132152218
版权
本文介绍了在Vue2项目中使用vue-grid-layout实现瀑布流布局的详细步骤，包括通过NPM安装指定版本的组件（vue-grid-layout@2.3.7）以解决可能的版本冲突问题，以及在vue文件中如何编写业务逻辑代码实现动态编辑功能。案例中展示了部分关键代码，但子组件和后台保存逻辑未详述。
摘要由CSDN通过智能技术生成

一、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
了解本专栏 订阅专栏 解锁全文 超级会员免费看
DO_IT_JACK
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
vue2项目使用瀑布流
weixin_45654455的博客
09-22 860
瀑布流布局是常见的布局方式，因为需求原因前端需要在手机横屏的情况下展示瀑布流的布局方式。百度了瀑布流的布局原理和方法。开始是想用简单的css样式布局就是multi-column 多栏布局但是这个布局只能满足从左到右。因为使用场景是手机横屏的情况下进行展示，所以这种方法是不可取的，
flipkart-clone:flipkart 克隆项目我的第一个项目
08-05
2. **响应式设计**：由于现代网站需要适应不同设备的屏幕尺寸，开发者可能使用媒体查询（media queries）和流式布局（flexbox 或 grid layout）来实现响应式设计，确保在手机、平板和桌面电脑上都能正常显示。...
vue2实现瀑布流布局
weixin_51958960的博客
01-29 1760
npm install vue-waterfall2@1.8.20 --save （提示：一定要安装1.8.20，最新版会有一部分问题）2.打开main.js文件。
vue2.0实现瀑布流布局+虚拟列表，附带源码及效果预览视频
最新发布
2301_76370692的博客
06-28 1267
vue2.0实现瀑布流布局+虚拟列表，支持视窗大小改变布局也能动态变化，附带源码
使用 vue-waterfall2插件 vue 瀑布流(1)
2401_84419493的博客
05-01 1049
avatar:title: “最近浴室新宠，日系神仙好物了解一下～”,user: “迷人的小妖精迷人的小妖精”,},img:avatar:title: “夏天用这款姨妈巾，让你体验真正的清爽”,user: “迷人的小妖精迷人的小妖精”,},img:avatar:title: “150元搞定全套护肤品，这些护肤好物必须交出来！”,user: “迷人的小妖精迷人的小妖精123”,},img:avatar:title: “最近浴室新宠，日系神仙好物了解一下～”,
Vue2瀑布流图片展示（Waterfall）
Mr Dear的博客
12-06 4331
Vue2使用纯CSS和JS计算两种方式实现的瀑布流图片展示组件
jquery-easyui-1.2.3.zip
01-03
- **Grid（表格）**：支持数据列的排序、过滤、分页，以及行的编辑、添加、删除等操作。 - **Tree（树形结构）**：展示层级关系的数据，支持节点的展开、折叠、选择等操作。 - **Menu（菜单）**：构建下拉菜单或...
boolean-uk-html-adding-the-rest:用CodeSandbox创建
04-15
4. **分享与嵌入**：可以生成项目链接，让他人查看或编辑，也可以将项目嵌入到网页或博客中。 5. **导入/导出**：可以导入GitHub仓库或本地项目，也可以导出为.zip文件。 从【压缩包子文件的文件名称列表】"boolean...
zippy-ui:测试仓库
03-29
3. CSS-in-JS：将CSS嵌入到JavaScript中，结合React、Vue等框架，实现组件化的样式管理。 总的来说，"zippy-ui"项目涵盖了从基础CSS语法到高级特性的广泛知识，包括但不限于选择器、布局、响应式设计、性能优化以及...
WEB-PROGRAMING
03-28
现代前端框架，如React、Vue和Angular，都是基于JavaScript构建的，它们提供了更高效、模块化的方式来开发复杂的Web应用。 学习网页编程通常从HTML基础开始，理解元素结构和语义化标签的使用。然后，掌握CSS布局...
使用vue实现grid-layout功能实例代码
08-28
主要介绍了使用vue实现grid-layout功能的代码讲解,需要的朋友可以参考下
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
vue2 瀑布流 vue-waterfall-easy
sunzan0227的博客
08-16 462
recordList 是个数组 里面必须有src键 指对。
微信小程序实战，基于vue2实现瀑布流
隐风的博客
11-21 3752
瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
vue3.0瀑布流（vue-grid-layout）
weixin_43506403的博客
09-02 9561
vue-grid-layout是一个vue的可拖拽的瀑布流布局组件，并提供相应的事件进行自定义操作。而且布局可以存储和再展现。 安装： npm install --save vue-grid-layoutcnpm 特点： 元素可拖动 元素可调整大小 边界检查拖动和调整大小 可以添加或删除窗口小部件而无需重建网格 布局可以序列化和恢复 自动RTL支持（调整大小不适用于2.2.0上的RTL） github地址：https://github.com/jbaysolutions/vue-grid-layout
【简单好用，支持图片懒加载】 vue-waterfall2 基于Vue.js 瀑布流 懒加载 组件
Daivon_Up的博客
11-16 6295
vue-waterfall2 1.宽度自适应,数据绑定 2.自定义程度高 3.使用极为简便,适用于PC/移动端 4.提供resize(强制刷新布局)/mix(扰乱布局) API，一般情况下不需要用到 5.后期将持续更新，提供animation（过渡动画） Demo http://47.105.188.15:3000/ Installation npm install --save vue-wa...
vue实现瀑布流
Summer_JK的博客
01-31 3471
每个色块宽度一致，高度自适应 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <meta name="viewport" content="user
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-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DO_IT_JACK

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值