如何使用vue3封装一个打印组件，打印的内容需要能够自定义

可以使用Vue3的Composition API来封装一个打印组件。

首先，在组件中引入`ref`和`toRef`，`ref`用于创建响应式变量，`toRef`用于将一个普通变量转换成响应式变量。

在模板中，可以使用`v-if`来控制打印内容的显示与隐藏。

以下是一个简单的打印组件示例：

<template>
  <div>
    <div v-if="printVisible" ref="printContent">
      <!-- 打印内容 -->
      <slot></slot>
    </div>
    <button @click="print">打印</button>
  </div>
</template>

<script>
import { ref, toRef } from 'vue';

export default {
  setup() {
    const printVisible = ref(false);
    const printContent = toRef(this.$refs, 'printContent');

    // 打印
    const print = () => {
      printVisible.value = true;
      setTimeout(() => {
        window.print();
        printVisible.value = false;
      }, 100);
    };

    return {
      printVisible,
      printContent,
      print,
    };
  },
};
</script>

上述示例中，使用`ref`创建了一个名为`printVisible`的响应式变量，用于控制打印内容的显示与隐藏。使用`toRef`将`this.$refs.printContent`转换为响应式变量`printContent`，用于获取打印内容的DOM元素。

在`print`函数中，将`printVisible`设置为`true`，显示打印内容，然后使用`setTimeout`延迟100ms，等待DOM更新完成后再执行`window.print()`打印操作。打印完成后，将`printVisible`设置为`false`，隐藏打印内容。

在模板中，使用`v-if`指令根据`printVisible`的值来控制打印内容的显示与隐藏。`button`元素绑定`click`事件调用`print`函数，触发打印操作。

需要注意的是，该示例中只是实现了打印操作，打印内容需要根据实际需求进行自定义。可以通过组件的插槽（slot）来实现自定义打印内容。在组件模板中使用`<slot></slot>`标签来定义插槽，然后在使用组件时，通过插槽来传入打印内容。例如：

<template>
  <Print>
    <h1>打印内容</h1>
    <p>打印时间：{{ printTime }}</p>
  </Print>
</template>

<script>
import Print from './Print.vue';

export default {
  components: {
    Print,
  },
  data() {
    return {
      printTime: new Date().toLocaleString(),
    };
  },
};
</script>

在上述示例中，使用`<Print>`标签来调用打印组件，同时在组件中定义了一个插槽，用于传入打印内容。在打印内容中，使用了一个数据属性`printTime`来表示打印时间，该属性可以在组件外部定义并传入。