拿来就用vue-gird-layout组件封装示例
作者：Xbbing
这篇文章主要介绍了vue-gird-layout组件封装示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
先来效果图展示
展示
拖拽尺寸
拖拽后
移动
组件封装
大家这块直接复制使用就OK
<template>
<grid-layout
:layout="layout"
:col-num="colNum"
:row-height="rowHeight"
:is-mirrored="isMirrored"
:vertical-compact="verticalCompact"
:margin="margin"
:use-css-transforms="useCssTransforms"
:useStyleCursor="useStyleCursor"
:is-draggable="isDraggable"
:is-resizable="isResizable"
@layout-updated="layoutUpdatedEvent"
>
<grid-item v-for="(item, index) in layout"
:x="item.x"
:y="item.y"
:w="item.w"
:h="item.h"
:i="item.i"
:minW="minW"
:minH="minH"
:key="index"
@resized="resize(item.i)">
<slot name="chart" :item="item" :index="index"></slot>
</grid-item>
</grid-layout>
</template>
<script>
import VueGridLayout from 'vue-grid-layout';
// import Chart from "@/components/chart/index.vue";
export default {
components: {
GridLayout: VueGridLayout.GridLayout,
GridItem: VueGridLayout.GridItem,
// Chart
},
props: {
// 布局数据
layout: {
type: Array,
default: () => []
},
// 是否可拖拽
isDraggable: {
type: Boolean,
default: true
},
// 是否可改变大小
isResizable: {
type: Boolean,
default: true
},
// 多少列
colNum: {
type: Number,
default: 12
},
// 每行得高度
rowHeight: {
type: Number,
default: 30
},
// 是否可镜像反转
isMirrored: {
type: Boolean,
default: false
},
// 标识布局是否垂直压缩
verticalCompact: {
type: Boolean,
default: true
},
// 定义栅格中的元素边距
margin: {
type: Array,
default: () => [10,10]
},
// 标识是否使用CSS属性 transition-property: transform;
useCssTransforms: {
type: Boolean,
default: true
},
// 是否使用动态鼠标指针样式
useStyleCursor: {
type: Boolean,
default: true
},
// 元素最小宽
minW: {
type: Number,
default: 1
},
// 最小高
minH: {
type: Number,
default: 1
},
show: {
type: Boolean,
default: false
}
},
data() {
return {
height: '',
option: {},
gridShow: false
}
},
methods: {
layoutUpdatedEvent(newLayout) {
this.$emit('layoutUpdatedEvent',newLayout)
},
// 更新resize
resize(i) {
this.$emit('resize',i)
}
}
}
</script>
<style lang="scss" scoped>
:deep(.el-card__body) {
height: 100%;
}
</style>组件的调用
（主要是使用这块 上面的直接复制即可）
<template>
<div>
<gridCanvas :layout="layout" @layoutUpdatedEvent="layoutUpdatedEvent" @resize="resize">
<template #chart="{item,index}">
<el-card v-if="show" ref="elCard" style="height: 100%" :key="item.i">
<Chart :ref="'echarts'+item.i" :chartsData="item.data" :radioShow="false" :height="'100%'" :id="index"></Chart>
</el-card>
</template>
</gridCanvas>
</div>
</template>
<script>
import gridCanvas from "@/components/gridCanvas/index.vue";
import Chart from "@/components/chart/index.vue";
export default {
components: {
gridCanvas,
Chart
},
data() {
return {
show: false,
layout: [
{"x":0,"y":0,"w":6,"h":10,"i":"0",
data: {
descData: ["广东省", "江苏省", "北京市", "浙江省", "山东省", "四川省", "河南省", "上海市12345", "河北省", "其他", "福建省", "安徽省", "湖北省", "辽宁省"],
dis_type: "barh",
label_desc: "最近一次测试",
label_id: 5,
subtext: "99.99%",
text: "图标1",
xData: [2211, 333, 372, 226, 248, 218, 103, 199, 174, 177, 146, 148, 171, 162],
yData: ["广东省", "江苏省", "北京市", "浙江省", "山东省", "四川省", "河南省", "上海市", "河北省", "其他", "福建省", "安徽省", "湖北省", "辽宁省"],
}
},
{"x":4,"y":0,"w":4,"h":8,"i":"1",
data: {
descData: ["广东省", "江苏省", "北京市", "浙江省", "山东省", "四川省", "河南省", "上海市12345", "河北省", "其他", "福建省", "安徽省", "湖北省", "辽宁省"],
dis_type: "pie",
label_desc: "最近二次测试",
label_id: 5,
subtext: "99.99%",
text: "图标2",
xData: [810, 357, 372, 226, 248, 218, 193, 189, 174, 477, 146, 148, 131, 162],
yData: ["广东省", "江苏省", "北京市", "浙江省", "山东省", "四川省", "河南省", "上海市", "河北省", "其他", "福建省", "安徽省", "湖北省", "辽宁省"],
}
},
{"x":0,"y":5,"w":4,"h":8,"i":"6",
data: {
descData: ["广东省", "江苏省", "北京市", "浙江省", "山东省", "四川省", "河南省", "上海市12345", "河北省", "其他", "福建省", "安徽省", "湖北省", "辽宁省"],
dis_type: "bar",
label_desc: "最近三次测试",
label_id: 5,
subtext: "99.99%",
text: "图标3",
xData: [810, 377, 342, 286, 274, 219, 190, 199, 174, 147, 146, 438, 171, 162],
yData: ["广东省", "江苏省", "北京市", "浙江省", "山东省", "四川省", "河南省", "上海市", "河北省", "其他", "福建省", "安徽省", "湖北省", "辽宁省"],
}
},
]
}
},
methods: {
// 拖拽之后触发
layoutUpdatedEvent(newLayout) {
console.log(newLayout)
},
resize(i) {
this.$nextTick(() => {
const chart = eval(`this.$refs.echarts${i}`)
if(chart) {
chart.resize()
}
})
}
},
mounted() {
setTimeout(() => {
this.show = true
})
}
}
</script>
<style lang="scss" scoped>
:deep(.el-card__body) {
height: 100%;
}
</style>使用讲解
直接引用我们自己封装的组件 代码中chart组件为我自己封装的echarts组件,后续我会更新，你只需讲chart组件换为你自己封装的组件 其中#chart为插槽参数 （其实就是每块的数据）layout变量为grid的核心数据,分别代表x轴坐标y轴坐标宽度和高度其中data为你需要渲染的数据 还不能使用的