Question

编辑：该库实际上取决于v-for。制作一个像以下这样使用的编译器指令是否有意义：

<render v-for="template in templates" :template="template"> </render>

然后，模板数组将只是一串模板，以调用Vue.compile？我认为这可能不适用于自定义指令。

https://github.com/SortableJS/Vue.Draggable

我想实现一个网格，其中包含用户可以拖放以在网格内重新放置的项目。我围绕vuedraggable做了一个包装指令，称为Grid。然后，我做了一个GridItem指令，将自身添加到Grid指令。我打算这样做，以便可以尝试重新定位组件，而无需使用v-for

网格：

    <template>
    <draggable :list="gridItems" @start="drag=true" @end="testEnd">
        <slot/>
    </draggable>
</template>

<script>
    import draggable from 'vuedraggable';

    export default {
        name: 'Grid',
        components: {
            draggable
        },
        props: {
            gridItems: {
                type: Array,
                required: true
            },
        },
        methods: {
            testEnd: function() {
              this.drag = false;
              console.error('onDragEnd', this.gridItems);
            },
            addGridItem: function(item) {
                this.gridItems.push(item);
            },
            getGridItems: function() {
                return this.gridItems;
            }
        },
        provide: function() {
            return {
                addGridItem: this.addGridItem,
                getGridItems: this.getGridItems
            };
        },
        created() {
            console.error('drewzy', this.gridItems)
        }
    }
</script>

GridItem：

<template>
    <div :key="gkey">
        {{gkey}}
        <slot/>
    </div>
</template>

<script>
    import draggable from 'vuedraggable';

    export default {
        name: 'GridItem',
        components: {
            draggable
        },
        props: {
            gkey: {
                type: String,
                required: true
            },
        },
        computed: {
            addGridItem: function(item) {
                return this.addGridItem(item);
            },
            getGridItems: function() {
                return this.getGridItems();
            }
        },
        inject: ['addGridItem', 'getGridItems'],
        created() {
            const self = this;
            console.error('key', self.$props.gkey);
            self.addGridItem({
                gKey: self.$props.gkey
            });
            console.error(`gridItem-${self.$props.gkey}`, self.getGridItems())
        }
    }
</script>

MainComponent：

<grid :grid-items="[]" @start="drag=true" @end="drag=false">
        <grid-item :gkey="'test'">
            <ComponentToDragAndDrop1/>
        </grid-item>
        <grid-item :gkey="'test2'">
            <ComponentToDragAndDrop2/>
        </grid-item>
    </grid>

在Main组件中，而不是使用v-for并将提供给vuedraggable的列表中的所有内容都呈现为相同，我想显式列出自定义组件。因此，在上面的示例代码中，我列出了两个希望vuedraggable进行排序的组件。当我运行上面的代码时，将底部的组件拖动到顶部时，可以看到组件的重新定位。但是，在dragEnd上，它们将呈现在相同位置。我认为这是因为vue重新呈现了整个内容，而不是仅仅将它们分类为v-for。

无需使用v-for即可拖放组件

0 个答案: