vue3-print-nb 如何自定义样式

要自定义vue3-print-nb的样式，你需要做以下步骤：

1. 创建一个CSS文件，用于覆盖vue3-print-nb的默认样式。

2. 在需要打印的组件中引入该CSS文件，并在打印前将其插入到文档中。可以在组件的mounted生命周期钩子中实现这一步骤。

    <template>
      <div>
        <p>需要打印的内容</p>
      </div>
    </template>

    <script>
    import print from 'vue3-print-nb';

    export default {
      directives: { print },
      mounted() {
        const style = document.createElement('style');
        style.type = 'text/css';
        style.innerHTML = `
          // 在这里编写覆盖vue3-print-nb的样式
        `;
        document.getElementsByTagName('head')[0].appendChild(style);
      }
    }
    </script>

    <style scoped>
    // 这里编写组件的样式
    </style>

3. 在CSS中编写样式，覆盖vue3-print-nb的默认样式。可以使用类似以下的CSS选择器：

    @media print {
      // 在这里编写打印时的样式
    }

4. 打印时，使用vue3-print-nb提供的指令，如下所示：

    <button v-print="'#print'">打印</button>
    <div id="print">
      // 需要打印的内容
    </div>

注意事项：

- 打印时，会将整个页面的内容都打印出来。如果需要打印特定部分的内容，需要将其放在id为print的元素内，并在打印时指定该元素的选择器。

- 打印前需要将CSS文件插入到文档中，确保样式能够生效。