vue-grid-layout 的使用

vue-grid-layout中文文档

使用理由：这个瀑布流是可以拖拽的

碰到的问题

在安装完这个插件之后，在IE上无法打开，并报错缺少：，最终是下面这篇文章解决问题
Vue项目下IE报错 SCRIPT1003: 缺少 ‘:’，导致页面空白的解决方案
主要原因就是第三方库的兼容性问题，把vue-grid-layout引入到vue.config.js文件下的transpileDependencies集合中:

module.exports = {...transpileDependencies: ['element-ui', 'proxy-polyfill' , 'vue-grid-layout'],
}

基于layout的组件

我的需求值只需要显示3-4列的样子，所以我需要多少列就将col-num设为多少，便于后续的位置计算。这里的组件实现了对接收的数组进行构造，生成可供gird-layout使用的数据，最后返回拖拽调换后的顺序。

<template><grid-layout:layout.sync="layout":col-num="colNum":row-height="rowHeight":is-draggable="isDraggable":is-resizable="isResizable":is-mirrored="isMirrored":margin="marginArr":responsive="isResponsive":useStyleCursor="true"><grid-itemv-for="item in layout":x="item.x":y="item.y":w="item.w":h="item.h":i="item.i":key="item.i"class="item"drag-allow-from=".dragger"@moved="movedEvent"><!-- 將数据外传 --><slot name="item" :item="item"></slot></grid-item></grid-layout>
</template><script>
import * as _ from 'lodash'
import VueGridLayout from 'vue-grid-layout'
export default {components: {GridLayout: VueGridLayout.GridLayout,GridItem: VueGridLayout.GridItem,},props: {indData: {type: Array,default: () => [],},colNum: {type: Number,default: 3,},rowHeight: {type: Number,default: 100,},isDraggable: {type: Boolean,default: false},isResizable: {type: Boolean,default: false},isMirrored: {type: Boolean,default: false},isResponsive: {type: Boolean,default: false},marginArr:{type: Array,default: () => [10, 20],},// 根据这个键返回排序后的数组，如果不设置，就返回整个排序后的对象sortKey:{type:String,default:''}},data() {return {layout: [{ x: 0, y: 0, w: 1, h: 1, i: '0', id: 1 },{ x: 1, y: 0, w: 1, h: 1, i: '1', id: 2 },{ x: 2, y: 0, w: 1, h: 1, i: '2', id: 3 },{ x: 0, y: 1, w: 1, h: 1, i: '3', id: 4 },{ x: 1, y: 1, w: 1, h: 1, i: '4', id: 5 },],}},methods: {// 构造数据createLayout(arr) {const col = this.colNumconst res = arr.map((item, index) => {item.x = index % colitem.y = parseInt(index / col)item.w = 1item.h = 1item.i = index + ''return item})return res},// 移动之后的事件movedEvent(i, newX, newY) {const arr = this.getMovedOrder().map((item) => {if(!this.sortKey){return item}else{return item[this.sortKey]}})this.$emit('moved',arr)},getMovedOrder() {const newLayout = [...this.layout]// 先按y(行)排，再按x(列)排序newLayout.sort((a, b) => {if (a.y !== b.y) {return a.y - b.y} else {return a.x - b.x}})return newLayout},},watch: {indData:{handler(arr) {// 这里需要深拷贝，否则之后的操作会改变这个对象this.layout = this.createLayout(_.cloneDeep(arr))},deep: true,immediate:true},},
}
</script><style lang="scss" scoped>.item {touch-action: none;width: 100%;height:100%;border: 1px solid #5592e5;// transition: all .3s;// cursor: move;&:hover{transform: scale(1.05,1.05); }
}</style>

需要设置响应式的话，就对cols进行相应设置，breakpoints直接使用默认即可

:responsive="true"
:cols="{ lg: 3, md: 2, sm: 2, xs: 1, xxs: 1 }"
:breakpoints="{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }"

使用

<template><grid-fall :colNum="3" :rowHeight="100" :indData="indData" :isDraggable="true" @moved="getMovedData" :sortKey="'id'"><template slot="item" slot-scope="data">子组件循环中的值：{{data.item.i}}<!-- button 无效 --><el-button class="dragger">拖动(实际无效)</el-button><el-button class="no-drag">不可拖动</el-button><p class="dragger">拖动图标(可拖动)</p></template></grid-fall>
</template><script>import GridFall from '@/components/indicator/combine/GridFall.vue'
export default {components:{GridFall},data() {return {// 传入的对象数组indData: [{ id:0 },{ id:1 },{ id:2 },{ id:3 },{ id:4 },{ id:5 },]}},methods:{getMovedData(v){console.log('拖拽排序之后：',v)}}
}
</script>

vue-grid-layout 的使用相关推荐

Vue Grid Layout -️ 适用Vue.js的栅格布局系统（保姆级使用教程）
目录一. Vue Grid Layout 简介二.vue-grid-layout 的安装与使用三. 属性 3.1 gridItem 的必须属性 3.2 框架元素的实际宽度高度计算方式 3.3 元 ...
[Grid Layout] Specify a grid gutter size with grid-gap
It's beautifully straightforward to add a gutter to our grid layout. Let's apply one with grid-gap. ...
愿只有一个Grid Layout
CSS3新增布局三剑客之Grid Layout 一.前言相比较Multi-Columns Layout 和Flexible Box Layout,Grid Layuot更像是两者的结合,当然这里 ...
SAP Spartacus b2b 页面 banner 的grid layout设计
如下图所示: 每个banner里的a标签,都应用了grid layout模型: this element behaves like a block element and lays out its c ...
css高度自动填满_Unity--自动版面（Grid Layout Group）
Grid Layout Group 网格布局组组件将其子布局元素放置在网格中. Padding:(填充) 布局组边缘内的填充.与其他布局组不同,"网格布局组"将忽略其所包含布局元素 ...
Unity3d Ugui 20 Grid Layout Group Aspect Ratio Fitter
Grid Layout Group网格布局属性 Padding:布局组内边缘偏移. Cell Size:要用于组内每个布局元素的大小. Spacing:布局子元素之间的间距. Start Corne ...
grid layout网格布局详解
grid layout网格布局详解什么是grid layout grid的特点 grid css属性的基础知识创建一个grid布局创建一个网格隐性网格与显性网格尺寸单位fr repeat函数 ...
html设定列的最小宽度,设置Grid Layout列最小宽度的方法
设置Grid Layout列最小宽度的方法发布时间:2020-08-29 11:22:09 来源:亿速云阅读:184 作者:小新这篇文章主要介绍设置Grid Layout列最小宽度的方法,文中介 ...
【CSS 网格布局 (Grid Layout )】
CSS 网格布局 Grid Layout CSS 网格布局 Grid Layout 1. CSS 网格布局的基本概念 1.1 网格相关术语 1.2 网格布局的属性分类 2. grid 属性: 同时 ...
css grid设置宽度,如何设置Grid Layout （网格布局）列的最小宽度
如何设置Grid Layout (网格布局)列的最小宽度?设置网格的列最小宽度时,在网格的列宽设置部分中使用minmax()函数,下面我们就来看具体的内容. 我们先来看一下minmax()函数的格式m ...

vue-grid-layout 的使用

碰到的问题

基于layout的组件

使用

vue-grid-layout 的使用相关推荐

最新文章

热门文章