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

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

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

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

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

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

解决方法

我相信你在每个v-for中添加一个div / component,你可以为每个div添加唯一的id.现在下面的方法可以给你一个div的高度,你将有一些方法将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元素的data属性中添加以下哈希值,该元素将跟踪您添加分页符的索引：

pageBreakAdded: {}