vue-print-nb 页头页尾样式

vue-print-nb 是一个基于 Vue.js 的打印插件，支持自定义页头和页尾。你可以通过以下步骤来设置页头和页尾样式：

1. 在需要打印的组件中，添加 `<page-header>` 和 `<page-footer>` 标签。

2. 在 `<page-header>` 和 `<page-footer>` 标签中，添加需要打印的内容和样式。

3. 在打印页面时，通过 `print` 方法的第二个参数 `settings` 来配置页头和页尾的高度和样式。

示例代码：

<template>
  <div>
    <page-header>
      <h1>这是页头</h1>
    </page-header>
    <p>这是打印内容</p>
    <page-footer>
      <p>这是页脚</p>
    </page-footer>
    <button @click="print">打印</button>
  </div>
</template>

<script>
import { print } from 'vue-print-nb';

export default {
  methods: {
    print() {
      const settings = {
        headerHeight: '50px',
        footerHeight: '30px',
        headerStyle: {
          backgroundColor: '#f1f1f1',
          textAlign: 'center',
          lineHeight: '50px',
        },
        footerStyle: {
          backgroundColor: '#f1f1f1',
          textAlign: 'center',
          lineHeight: '30px',
        },
      };
      print('.print-content', settings);
    },
  },
};
</script>

<style>
@media print {
  .page-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .page-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
</style>

在上面的示例代码中，我们设置了页头和页脚的高度和样式，然后在打印按钮的点击事件中，调用了 `print` 方法，并传入需要打印的内容的选择器和设置项。在样式中，我们使用了 CSS 的 `position: fixed` 属性来使页头和页脚固定在页面顶部和底部。