vue监听浏览器打印功能

在Vue中，可以使用window.onafterprint事件来监听浏览器的打印功能。下面是一个示例：

<template>
  <div>
    <button @click="print">打印</button>
  </div>
</template>

<script>
export default {
  methods: {
    print() {
      window.print(); // 调用浏览器的打印功能
    }
  },
  mounted() {
    window.addEventListener('afterprint', this.handlePrint); // 监听打印完成事件
  },
  beforeDestroy() {
    window.removeEventListener('afterprint', this.handlePrint); // 在组件销毁前移除事件监听
  },
  methods: {
    handlePrint() {
      console.log('打印完成');
      // 在这里可以执行一些打印完成后的操作
    }
  }
};
</script>

在上面的代码中，@click="print"绑定了一个按钮点击事件，当用户点击按钮时，会调用print方法，触发浏览器的打印功能。

在mounted钩子函数中，我们通过window.addEventListener方法监听afterprint事件，并将其与handlePrint方法关联起来。这样，当浏览器完成打印后，handlePrint方法会被调用。

另外，在组件销毁前，需要使用window.removeEventListener方法移除事件监听，以防止内存泄漏。