vue-grid-layout与component实现echart自适应变化

本文链接：https://blog.youkuaiyun.com/qq_36181615/article/details/122986416

本文介绍了如何在Vue Grid Layout中针对GridItem.vue进行改造，以支持动态渲染图表组件（如ECharts）。改造过程中，通过使用作用域插槽将样式数据传递给组件，并在子组件中通过宽度和高度属性正确显示图表。同时，展示了改造后的代码片段和实际应用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在grid-item使用component动态渲染组件，如果组件是一个图表的话会渲染不出来，需要给定width，height。所以对vue-grid-layout中GridItem.vue做了简单的改造。

GridItem.vue

<template>
  <div
    ref="item"
    class="vue-grid-item"
    :class="{'vue-resizable' : resizableAndNotStatic, 'static': static, 'resizing' : isResizing, 'vue-draggable-dragging' : isDragging, 'cssTransforms' : useCssTransforms, 'render-rtl' : renderRtl, 'disable-userselect': isDragging, 'no-touch': isAndroid }"
    :style="style"
    @click="handleClick"
  >
  // 修改成作用域插槽，由于style包含了width,height。只要暴露出去就OK啦
    <slot :data="{...style, active: active}"></slot>

    <span
      v-if="resizableAndNotStatic"
      ref="handle"
      :class="resizableHandleClass"
    ></span>
    <!--<span v-if="draggable" ref="dragHandle" class="vue-draggable-handle"></span>-->
  </div>
</template>

vue-grid-layout使用

    <grid-layout
		      :layout.sync="layout"
		      :col-num="12"
		      :row-height="30"
		      :vertical-compact="true"
		      :use-css-transforms="true"
		      @layout-ready="layoutReadyEvent"
		      @layout-updated="layoutUpdatedEvent"
	>
              <grid-item
                v-for="item in layout"
                :static="item.static"
                :scale='scale'
                :x="item.x"
                :y="item.y"
                :w="item.w"
                :h="item.h"
                :i="item.i"
                :key="item.i"
                @resized="resizedEvent"
                @moved="movedEvent"
              >
              // 使用如下
                <template v-slot="data">
                  <component
                    :width='data.data.width'
                    :height='data.data.height'
                    :is='item.ele.name'
                  />
                </template>

              </grid-item>
            </grid-layout>

chart.vue

<template>
  <div :id="id" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
   .........
}
</script>