github "vue-grid-layout" 任意拖拽插件,如何动态实现页面布局?

Question

问题1:每个拖拽块布局代码写在哪里,尝试以字符串形式放在testLayout数据的i里,貌似不行.
问题2:如果想定位循环出来的每个块的ref,只能通过在App主组件循环grid-item时,加入ref="Item",再通过 this.$refs.Item[0] 这样定位吗 ?

插件地址:https://github.com/jbaysoluti...

1.循环可拖拽区块数据结构:
testLayout数据中,x,y,w,h表示每个区块坐标及所占空间,i是传给子组件TestElement 内容.

data () {
    return {
        layout: JSON.parse(JSON.stringify(testLayout))
        ... ...
        }}

let testLayout = [
        {"x":0,"y":0,"w":3,"h":6,"i":"0", resizable: true, draggable: true, static: false},
        {"x":6,"y":0,"w":9,"h":6,"i":"1", resizable: null, draggable: null, static: false},
        {"x":0,"y":0,"w":3,"h":6,"i":"2", resizable: false, draggable: false, static: false},
        {"x":6,"y":0,"w":9,"h":6,"i":"3", resizable: false, draggable: false, static: false},
        {"x":0,"y":0,"w":3,"h":6,"i":"4", resizable: false, draggable: false, static: false},
        {"x":10,"y":0,"w":9,"h":6,"i":"5", resizable: false, draggable: false, static: false}
        ]

2.App主组件结构:

<grid-layout
    :margin="[parseInt(marginX), parseInt(marginY)]"
        :layout.sync="layout"
        :col-num="parseInt(colNum)"
        :row-height="rowHeight"
        :is-draggable="draggable"
        :is-resizable="resizable"
        :is-mirrored="mirrored"
        :prevent-collision="preventCollision"
        :vertical-compact="compact"
        :use-css-transforms="true"
        :responsive="responsive"
        @layout-created="layoutCreatedEvent"
        @layout-before-mount="layoutBeforeMountEvent"
        @layout-mounted="layoutMountedEvent"
        @layout-ready="layoutReadyEvent"
        @layout-updated="layoutUpdatedEvent"
        @breakpoint-changed="breakpointChangedEvent"
>
    <grid-item v-for="item in layout" :key="item.i"
               :static="item.static"
               :x="item.x"
               :y="item.y"
               :w="item.w"
               :h="item.h"
               :i="item.i"
               :min-w="item.minW"
               :max-w="item.maxW"
               :min-x="item.minX"
               :max-x="item.maxX"
               :min-y="item.minY"
               :max-y="item.maxY"
               :preserve-aspect-ratio="item.preserveAspectRatio"
               @resize="resize"
               @move="move"
               @resized="resized"
               @container-resized="containerResized"
               @moved="moved"
    >
        <test-element :text="item.i" @removeItem="removeItem($event)"></test-element>
    </grid-item>
</grid-layout>

3 gridlayout组件结构:

    <div ref="item" class="vue-grid-layout" :style="mergedStyle">
        <slot></slot>
        <grid-item class="vue-grid-placeholder"
                   v-show="isDragging"
                   :x="placeholder.x"
                   :y="placeholder.y"
                   :w="placeholder.w"
                   :h="placeholder.h"
                   :i="placeholder.i"></grid-item>
    </div>

4 griditem组件结构:

    <div ref="item"
         class="vue-grid-item"
         :class="classObj"
         :style="style"
    >
        <slot></slot>
        <span v-if="resizableAndNotStatic" ref="handle" :class="resizableHandleClass"></span>

    </div>

5 Testelement组件结构:

    <div>
        <span class="text">
            {{text}}
        </span>
        <span class="remove" @click="$emit('removeItem', text)">x</span>
    </div>

Answer 1

目前使用字符串传值,能够实现布局.
需要使用vue.compile进行编译.
产生新问题: 无法获取渲染后的ref.
新问题:新问题

let testLayout = [
        {"x":0,"y":0,"w":3,"h":6,"i":"0","j":"<h2>222</h2>", resizable: true, draggable: true, static: false},
        {"x":6,"y":0,"w":9,"h":6,"i":"1","j":'<div>'+'<span  ref='myChart' class='myChart'></span>'+'</div>', resizable: null, draggable: null, static: false},

        ]