Question

嗨，我遇到了包装问题。

基于此解决方案https://codepen.io/Monocle/pen/ZbeBGL

我将每个网格项作为一个组件，然后在app.js（主文件）中根据给定的示例初始化包。

  var pckry = new Packery(container, {
    itemSelector: '.grid-item',
    columnWidth: '.grid-sizer',
  });

我现在想要处理打开/关闭组件，然后将它们拖放到draggabilly并绑定/取消绑定到packery。但问题是我不能将打包作为vue对象的一个属性而只是制作this.pckry.getShiftPositions（）（基于示例：https://codepen.io/desandro/pen/PZrXVv）。

pckry.on( 'dragItemPositioned', function() {
  // save drag positions
  var positions = pckry.getShiftPositions( 'data-item-id' );
  localStorage.setItem( 'dragPositions', JSON.stringify( positions ) );
});

问题是处理包装对象的实例我猜。它只是不工作。

this.pckry.on( 'dragItemPositioned', function() {
  // save drag positions
  var positions = this.pckry.getShiftPositions( 'data-item-id' );
  localStorage.setItem( 'dragPositions', JSON.stringify( positions ) );
});

实际上没有用。当我把它作为

this.pckry = newPackery(...);

我该如何实际处理？

Answer 1

从我使用这个打包库开始，它已经很长时间了。每次我向网格添加一些内容时，我设法重新创建了包装实例，但由于packery再次对其进行排序，因此它并不理想。它实际上是一维基础排序（如列表）。所以它仍然没有像我预期的那样工作。我需要保存所有网格项的（x，y）位置。

Additionaly Vue虚拟DOM和jquery DOM是不同的东西，它不能正常工作，我猜它使用它并不常见。

现在我正在为VueJS创建自己的网格布局。并致力于最终的改变。你可以在这里关注我：https://github.com/lrembacz/vue-responsive-grid-layout

如何将动态VueJS组件添加到包装？

1 个答案: