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

Posted 2023-02-22

【中文标题】如何将 VueJS 组件动态添加到打包中？

【英文标题】：How to add dynamiclly VueJS component to packery?

【发布时间】：2018-01-25 02:06:36

【问题描述】：

您好，我遇到了打包问题。

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

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

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

我现在想处理打开/关闭组件，然后使它们可拖动并绑定/取消绑定到打包程序。但问题是我不能将打包程序作为 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(...);

我该如何处理呢？

【问题讨论】：

你找到答案了吗？

@KawishBehzad 检查我对这个问题的回答。

【参考方案1】：

从我使用这个packery库开始，已经很久了。每次我在网格中添加一些东西时，我都设法重新创建了 packery 实例，但这并不理想，因为 packery 再次对其进行排序。它实际上是一维基础排序（如列表）。所以它仍然没有像我预期的那样工作。我需要为所有网格项目保存我的 (x,y) 位置。

另外，Vue 虚拟 DOM 和 jquery DOM 是不同的，它不能正常工作，而且我猜它不常见。

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