vue-print-nb 自定义页头页尾 局部打印

要在 vue-print-nb 中自定义页头和页脚并进行局部打印，可以按照以下步骤进行：

1. 在你的组件中引入 vue-print-nb：

   import vuePrint from 'vue-print-nb';

2. 创建一个打印模板并将其传递给 vue-print-nb 组件：

   <vue-print :printContent="printTemplate" :showPrint="showPrint"></vue-print>

其中 `printTemplate` 是要打印的内容，`showPrint` 控制是否显示打印弹窗。

3. 在 `printTemplate` 中添加自定义的页头和页脚，例如：

   <div class="page-header">我的自定义页头</div>
   <div class="page-footer">我的自定义页脚</div>
   <div class="page-body">
     <!-- 打印内容 -->
   </div>

这里我们使用了三个 `<div>` 标签来分别代表页头、页脚和打印内容。

4. 在样式表中为页头和页脚添加样式：

   .page-header {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 50px;
     background-color: #f5f5f5;
     text-align: center;
     font-size: 24px;
     line-height: 50px;
   }
   
   .page-footer {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 50px;
     background-color: #f5f5f5;
     text-align: center;
     font-size: 16px;
     line-height: 50px;
   }

5. 在打印按钮的点击事件中设置要打印的内容为当前组件中的某个元素，例如：

   print() {
     this.printTemplate = this.$refs.printContent.innerHTML;
     this.showPrint = true;
   }

这里我们使用了 `$refs` 来获取组件中名为 `printContent` 的元素，将其转成 HTML 字符串并赋值给 `printTemplate`，然后显示打印弹窗。

6. 最后，在打印弹窗中选择“局部打印”选项，就可以只打印指定的内容了。

希望这些步骤可以帮助你实现自定义页头页脚并进行局部打印。