Vue.js 如何在模态窗口中使用window.print

在本文中，我们将介绍如何在Vue.js中使用window.print在模态窗口中实现打印功能。Vue.js是一个用于构建用户界面的渐进式JavaScript框架，可以轻松创建交互式的Web应用程序。

准备工作

首先，我们需要安装Vue.js并创建一个基本的Vue组件。以下是一个简单的示例：

<template>
  <div>
    <button @click="openModal">打开模态窗口</button>

    <div v-show="showModal">
      <!-- 模态窗口内容 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    }
  },
  methods: {
    openModal() {
      this.showModal = true;
      this.$nextTick(() => {
        // 在模态窗口中执行打印
      });
    }
  }
}
</script>

<style scoped>
/* 样式 */
</style>

在上述示例中，我们有一个按钮，点击它会打开一个模态窗口。当点击按钮时，我们将模态框的显示状态置为true，并通过$nextTick()函数确保模态窗口已经渲染完毕。

在模态窗口中执行window.print()

现在我们需要在模态窗口中执行window.print()函数来实现打印功能。为了实现这个目标，我们将使用Vue的ref属性和$refs来获取模态窗口的DOM元素。

首先，在模态窗口标签上添加ref属性，以便我们可以引用到它：

<div v-show="showModal" ref="modal">
  <!-- 模态窗口内容 -->
</div>

接下来，在openModal方法的$nextTick回调函数中，我们获取模态窗口的DOM元素并执行window.print()函数。

openModal() {
  this.showModal = true;
  this.nextTick(() => {
    const modal = this.refs.modal;

    // 在模态窗口中执行打印
    window.onafterprint = () => {
      this.showModal = false; // 打印完成后关闭模态窗口
    };
    window.print();
  });
}