javascript - 在 Vuejs 中计算 DOM 元素之间距离的最佳方法是什么？

Question

我正在构建一个从数据生成 pdf 文件的工具，我需要构建两种格式:105mm * 148mm 和 105mm * 210mm。所以我得到了整个文档，现在是我插入分页符的时候了。我用一个简单的类来做到这一点:

.page-break { display: block; page-break-before: always; }

现在我必须将这个类插入到我的 v-for 循环中。所以一个基本的想法是计算一个区间，比如每个索引都是 6 的倍数，我插入一个。但这不是最好的方法，我想在内容超过 90mm 时插入一个中断。

为了做到这一点，我想计算 2 个断裂之间的距离，如果距离接近 90 毫米，则插入一个新断裂。但是，我找不到访问我的动态 DOM 元素的方法...

所以问题很简单:如何计算这个距离？或者如果有更好的方法来实现我的目标，我可以改进什么？

Answer 1

我相信您在每个 v-for 中添加了一个 div/component，并且您可以为每个 div 添加一个唯一的 id。现在下面的方法可以给你一个 div 的高度，以 px 为单位，你将有一些方法将 px 转换为 mm。

如果您使用 jquery , 你可以这样做

$('#nthDiv').height();

如果没有，您可以执行以下操作:

inner height :

document.getElementById('#nthDiv').clientHeight;

outer height :

document.getElementById('#nthDiv').offsetHeight; 

如果您有以下代码:

<div v-for="(item, index) in items" :class="{'page-break': isBreakNeeded(index)}" :id="index + 'thDiv'">
   ///Your code
</div>

您需要添加以下方法:

isBreakNeeded (index) {       
   var height = 0
   do {
      index -= 1;
      height += document.getElementById('#' + index + 'thDiv').offsetHeight; 
      } while (index >= 0 || pageBreakAdded[index] == true)
      if(height > threshold){
         pageBreakAdded[index] = true
         return  true
      }
      else{
         return  false
      }
}

您还需要在 vue 元素的数据属性中添加以下散列，它将跟踪您添加分页符的索引:

pageBreakAdded: {}