vue-gird-layout组件封装,cv就可以使用

源码 · 2024-9-24 05:55:11

先来结果图展示

组件封装各人这块直接复制使用就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为你须要渲染的数据还不能使用的直接批评区见

vue-gird-layout组件封装,cv就可以使用

所属分类: 问答交流

新帖推荐: 30日

推荐作品