vue-grid-layout使⽤以及各项参数作⽤vue-grid-layout
⼀个可以拖拽的 vue 布局⽅案
// 地址
下载
# install with npm
npm install vue-grid-layout --save
# install with yarn
yarn add vue-grid-layout
引⼊
import VueGridLayout from 'vue-grid-layout'; // vue 项⽬中
<script src="vue-grid-layout.umd.min.js"></script>  // 普通项⽬中
案例以及所有属性
<grid-layout
//  作⽤数据类型必填备注
//===================================================
// ⽹格初始化布局数组必填每⼀项都必须具有i、x、y、w和h属性属性⽤作什么见下⽅
:layout.sync="layout"
// 表⽰⽹格有多少列数字⾮必填默认为12
:col-num="12"
// 表⽰⼀⾏的⾼度(以像素为单位) 数字⾮必填默认值为150
:row-height="30"
// 表⽰⽹格中最⼤⾏数数字⾮必填默认为⽆穷⼤
:
maxRows="20"
// 表⽰⽹格项数是否可以拖动 Boolean        ⾮必填默认为true
:is-draggable="true"
// 表⽰⽹格是否可以改变带⼤⼩ Boolean      ⾮必填默认为true
:is-resizable="true"
// RTL/LTR 的转换 Boolean      ⾮必填默认为false
:is-mirrored="false"
// 容器是否适应内部变化 Boolean  ⾮必填默认为 true
:autoSize="ture"
// 垂直⽅向上是否应该紧凑布局 Boolean ⾮必填默认为true
:vertical-compact="true"
/
/ ⽹格之间的边距两个数字组成的数组第⼀个数字为⽔品距离第⼆个为垂直距离⾮必填默认值为 [10,10]
:margin="[10, 10]"
// 是否使⽤css的transforms来排版⾮必填为false时使⽤后采⽤定位⽅式来布局默认为true
:use-css-transforms="true"
// 布局是否应响应窗⼝宽度⾮必填默认false 为true时会出现⼀些布局错乱的问题
:responsive="false"
//布局是否应响应为响应布局定义的窗⼝宽度断点对象类型⾮必填默认值
// { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }
:breakpoints=" { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }"
// 定义每个断点的列数
:cols="{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }"
/
/ ⽣命周期
@layout-created="layoutCreatedEvent"  // 布局创建事件
@layout-before-mount="layoutBeforeMountEvent" // 布局安装以前事件
@layout-mounted="layoutMountedEvent"    // 布局安装事件
@layout-ready="layoutReadyEvent"    // 布局准备活动
@layout-updated="layoutUpdatedEvent" // 格⼦位置⼤⼩更新
>
// 每个单独控制需要注意的是每⼀个属性都要在data中注册⼀下不然会导致不能拖拽或者不能放⼤缩⼩
<grid-item
class="echarts_box"
:x="layoutData[0].x" // 横向距离
:
y="layoutData[0].y" // 纵向距离
:w="layoutData[0].w" // 宽度
:h="layoutData[0].h" // ⾼度
:i="layoutData[0].i" // 唯⼀值（重复时设置会导致⼀块放⼤或缩⼩）string类型
@resize="resizeEvent" // 当该元素被放⼤缩⼩触发的事件
@move="moveEvent" // 该元素移动时触发的事件
@resized="resizedEvent" // 放⼤缩⼩结束触发事件注意：必须当⼤⼩相对上⼀次发⽣改变结束时才会触发
@moved="movedEvent" // 移动结束触发注意：只有当位置相对上⼀次发⽣改变才会触发
></grid-item>
// for循环便利数组中的内容渲染元素
// <grid-item v-for="item in layout"
//          :x="item.x"
//          :y="item.y"
//          :w="item.w"
//            :h="item.h"
//          :i="item.i">
//        {{item.i}}
//</grid-item>
</grid-layout>
resizedimport VueGridLayout from 'vue-grid-layout' //⽂件引⼊
const matedata = [
{
i: "0", // 索引值必填
h: 4,  // ⾼度必填
w: 7,  // 宽度必填
x: 2,  // x 轴距离必填
y: 0,  // y轴距离必填
minW:5 // 最⼩宽度当 w的值⼩于minW时采⽤minW的值
minH:3 // 同上
maxW:8 // 的最⼤宽度。如果w⼤于maxW，那么w将被设置为maxW。
maxH:6 // 同上
isDraggable:true// 单独控制这⼀个盒⼦是否可以拖动未填写继承⽗元素的⾮必填
isResizable:true// 单独控制这⼀个盒⼦是否可以调整⼤⼩未填写继承⽗元素的⾮必填
static:false// 这个盒⼦是静态的不能被其他元素改变位置会被覆盖在底部
dragIgnoreFrom: '' // 属性这值为css 选择器项的哪些元素不应触发项的拖动事件// 具体不知道⼲嘛的没有⽤到    dragAllowFrom:'' // 属性这值为css 选择器项的哪些元素应触发项的拖动事件 // ⽂档这样写的
resizeIgnoreFrom:''//属性这值为css 选择器表⽰项的哪些元素不应触发项的调整⼤⼩事件。//来⾃⽂档翻译
},
{
h: 1,
i: "1",
w: 1,
x: 0,
y: 1
},
{
h: 1,
i: "2",
w: 1,
x: 0,
y: 2
},
{
h: 1,
i: "3",
w: 1,
x: 0,
y: 3
}
];
export default {
data() {
return {
layoutData: matedata, //  存放布局数据数据格式如上
};
},
components: {
GridLayout, //注册组件
GridItem // 注册
},
methods: {
// 布局中单元改变事件  i, newX, newY 移动的坐标
//                i, newH, newW, newHPx, newWPx 变化的⼤⼩
//newHPx, newWPx 是实际的像素
// newH, newW 是数据中的以每个单位⼤⼩为基准点算
resizeEvent(i, newH, newW, newHPx, newWPx) {
console.log("⼤⼩正在改变",i, newH, newW, newHPx, newWPx);
},
moveEvent( i, newX, newY) {
console.log("正在移动",i, newX, newY);
},
resizedEvent(i, newH, newW, newHPx, newWPx) {
console.log("⼤⼩改变完了",i, newH, newW, newHPx, newWPx);
},
movedEvent( i, newX, newY) {
console.log("移动结束了", i, newX, newY);
},
// 布局组件的⽣命周期参数newLayout=> 布局的数据每个布局数据
layoutCreatedEvent(newLayout) {
console.log("1Created");
},
layoutBeforeMountEvent(newLayout) {
console.log("2Mount");
},
layoutMountedEvent(newLayout) {
console.log("3Mounted");
},
layoutReadyEvent(newLayout) {
console.log("4Ready");
},
layoutUpdatedEvent(newLayout) {
console.log("Updated");
}
},
created() {  },
mounted() {  };
};

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。