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

Question

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

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

现在我必须将这个类插入到我的v-for循环中.所以一个基本的想法是计算一个区间,就像每个索引是6的倍数,我插入一个.但这不是最好的方法,我想在内容超过90毫米时插入一个休息时间.

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

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

Answer 1

我相信您在每个 div 中添加一个 div/组件v-for，并且可以为每个 div 添加一个唯一的 id。现在，下面的方法可以为您提供 1 个 div 的高度px，并且您将有一些方法可以转换px为mm.

如果你使用jquery，你可以这样做

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

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

内部高度：

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

外部高度：

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 元素的 data 属性中添加以下哈希，它将跟踪您添加了分页符的索引：

pageBreakAdded: {}