使用vue-print-nb打印时，如何设置页码

使用vue-print-nb插件打印时，可以通过在打印页面的布局中添加页码元素来设置页码。具体步骤如下：

1. 在需要打印的页面布局中，添加一个用于显示页码的元素，例如一个div或者span标签，并为其设置一个class或者id属性，用于在样式表中设置页码的样式。
2. 在打印样式表中，为页码元素设置合适的位置和样式，可以使用CSS的position属性和top、right等属性来调整页码的位置，使用font-size、color等属性来设置页码的样式。
3. 在打印的页面布局中，使用v-print指令，并将页码元素的选择器作为参数传递给v-print指令，以指定需要打印的内容和设置页码的位置。

以下是一个示例代码，演示了如何使用vue-print-nb插件打印，并设置页码：

<template>
  <div id="print-content">
    <!-- 页面内容 -->
    <h1>这是打印页面的内容</h1>
    
    <!-- 页码 -->
    <div class="page-number">页码: {{ pageNumber }}</div>
    
    <!-- 打印按钮 -->
    <button v-print="'#print-content'">打印</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageNumber: 1, // 初始化页码
    };
  },
  mounted() {
    window.addEventListener('beforeprint', this.updatePageNumber); // 监听打印事件，更新页码
  },
  methods: {
    updatePageNumber() {
      this.pageNumber = 1; // 重置页码
    },
  },
};
</script>

<style scoped>
.page-number {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  color: #999;
}
</style>

在上述代码中，我们在打印页面的布局中添加了一个div元素，并为其设置了class属性为"page-number"，用于显示页码。在打印样式表中，我们设置了页码元素的位置和样式。在打印的页面布局中，使用v-print指令，并将页码元素的选择器"#print-content"作为参数传递给v-print指令，以指定需要打印的内容和设置页码的位置。在mounted钩子函数中，我们监听了beforeprint事件，并在事件回调函数中更新页码。